为 REST API 资源启用 CORS

跨源资源共享 (CORS) 是一项浏览器安全特征,浏览器限制脚本内发起跨源 HTTP 请求。如果你无法访问 API 并收到错误响应提示 CORS 跨域错误,那么你需要启用 CORS。本文介绍如何为简单请求启用 CORS。

示例

我们以 Login 接口为例介绍如何在 JavaScript 中允许跨域请求。

//指定请求 URL 地址
const url = "http://192.168.5.150:8088/api/v1.1.0/login";

//设置请求头中的 Content-type 字段值
const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded"); //此处指定的值仅限于"application/x-www-form-urlencoded"、"multipart/form-data" 或 "text/plain"。此类请求会被认为是一个简单请求,从而避免预检请求的发送,简化跨域请求的过程。

//设置 body 参数
const raw = JSON.stringify({
    "username": "api",
    "password": "2d7257a528679d01a19c70e3fa773620",
    "port": "8260",
});

//设置请求选项
const requestOptions = {
    method: "POST", 
    mode: "cors", //表示允许跨域请求。
    headers: myHeaders,
    body: raw, 
    credentials: "include", //无论跨域还是同源都会带cookie。
};

//本例中,使用 fetch() 方法传入指定参数向指定 URL 发起 HTTP 请求。
fetch(http://192.168.5.150:8088/api/v1.1.0/login, requestOptions)
    .then((response) => response.text())
    .then((result) => console.log(result))
    .catch((error) => console.error(error));