ReactJS CORS 选项

CORS (Cross-Origin Resource Sharing) 是一个浏览器的安全策略，它规定了浏览器只能向同一域名下请求资源。当我们的 ReactJS 应用需要从其他源获取资源时，浏览器会阻止此请求。而使用 CORS 选项则可以允许跨域请求。

设置 CORS 选项

通过配置 fetch 或 Axios 库的选项，我们可以设置跨域请求的相关参数。以下是一个可以使用 CORS 选项的 fetch 请求：

fetch(url, {
  method: "GET",
  mode: "cors",
  credentials: "include",
  headers: {
    "Content-Type": "application/json",
  },
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

以上代码中，mode 参数为 "cors"，表示该请求使用 CORS 方式，credentials 参数为 "include"，表示该请求会带上 cookie 。headers 参数可根据实际情况进行配置。

使用 Axios 库同样可以设置 CORS 选项，以下是一个可以使用 CORS 选项的 Axios GET 请求：

axios
  .get(url, {
    withCredentials: true,
  })
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

以上代码中，withCredentials 参数为 true，表示该请求会携带 cookie。

解决 CORS 问题

除了设置 CORS 选项，我们还可以通过以下方法解决 CORS 问题：

• 使用 CORS 代理服务器。将跨域请求发送到代理服务器，代理服务器再将请求发送给真实的 API 服务。例如 CORS Anywhere 代理服务器。
• 在 API 服务端设置允许跨域访问的头部。如果 API 服务是我们自己搭建的，可以在服务端代码中设置允许跨域访问的头部。例如在 Node.js 中，使用 cors 中间件。

总结

ReactJS 应用中，跨域请求时需要设置 CORS 选项以达到请求效果。同时，还可以通过使用 CORS 代理服务器或在 API 服务端设置允许跨域访问的头部来解决 CORS 问题。