解决 Spring boot 中的 CORS 问题

Description

CORS, Cross-origin resource sharing, 即跨域资源共享。

写好的 REST API 在 JavaScript 中调用时，会因为一种安全策略导致无法跨域获取。

之前绝大多数情况下都是在已经搭好的工程下修修补补，因此并没有机会接触到这个问题。虽然大致知道怎么做，上手时还是感到有点棘手。

Solution

非常简单，直接在 Controller 或者具体接口前加上 @CrossOrigin(origins = "*") 的注解就行了。可以用 origins 指定可访问的域列表，不做限制的话，填 * 就行了。

用这个注解解决问题，更多情况可以参考：https://www.mmzsblog.cn/articles/2019/08/23/1566526598886.html

---

或者，用 Spring Security，在配置中允许 CORS 就行了。

By the way…

贴一个用自己可怜的 JavaScript 知识写的 “请求 REST API – 解析 JSON” 的一个脚本。

// mod.cjs
// const fetch = (...args) => import('node-fetch').then(({ default: fetch }) => fetch(...args));

var url = 'http://127.0.0.1:8080/example';
var promise = fetch(url, {
    mode: "cors",
    headers: {
        "Access-Control-Allow-Origin": '*',
        "Access-Control-Allow-Methods": "POST,GET,PUT,DELETE",
        "Access-Control-Max-Age": "3600",
        "Access-Control-Allow-Headers": "*",
        "Access-Control-Allow-Credentials": "true"
    },
}).then(function (response) {
    if (response.status === 200) {
        return response.json();
    } else {
        return {}
    }
});

promise = promise.then(function (data) {
    document.getElementById("pic").innerHTML = "<img src=\"" + data.pic + "\">";
}).catch(function (err) {
    console.log(err);
})

行首这是因为 node-fetch 和 fetch 不大一样，如果在浏览器中就保持注释，如果在 vs code 中就取消注释就行了。

假设 REST API 是 127.0.0.1:8080/example，请求到的 JSON 中有一个键名为 pic，存储某图片的 URL。解析的时候直接 data.pic 就可以了。

代码中挑出 id 为 pic 的元素，直接写 img 标签，填进去就行了。