为 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));