React JS 发送 get/post 请求时如何绕过 CORS 策略？

Question

从我的 React JS 应用程序中，我需要从其他域中的服务器获取数据。 但是，我受到 CORS 策略的阻止，无法获取数据。

让我们假设我的 React 应用程序在开发过程中在 localhost:3000 上运行。 我想对在 http://myserver.com 上运行的另一台服务器进行 get/post 调用 我想获取数据的URL是 http://ext-server.com/data/records?name=xyz

我已经通过 npm 安装了 http-proxy-middleware 并在我的 React 应用程序中使用它。 在 src 文件夹下创建了一个 setupProxy.js 文件，内容如下：

const { createProxyMiddleware} = require("http-proxy-middleware")
module.exports = app => {
   app.use(
      createProxyMiddleware('/data/records' , {
        target:'http://ext-server.com',
        changeOrigin: true
     })
 )
}

在我的 React 应用程序 (firstpage.js) 的登陆页面上，当点击 http://localhost:3000 时，我已将以下代码添加到按钮事件中，以调用 http://ext- server.com

getTheData() {
  
let url = "http://ext-server.com/data/records?name=" + encodeURIComponent(this.state.name); 

axios.get(url,
  { 
    headers: {
     "Content-Type":"application/json;charset=UTL-8",
     "Access-Control-Allow-Origin": "*",
     Accept: "application/json",
      }, 
      baseURL: 'http://ext-server.com'
   }
 ).then((response) => {
     console.log(response["access_token"]);
  }).catch(error) => {
       console.log("Error: ", error)
  }).then(function () {
       console.log("always call it")
});

}

在 package.json 中，我添加了：

"proxy": "http://ext-server.com",
"homepage":"http://localhost:3000",

但我仍然收到以下错误： 从源“http://localhost:3000”访问位于“http://ext-server.com/data/records?name=”的 XMLHttpRequest 已被 CORS 策略阻止。

我在这里缺少什么吗？使用这个 http-proxy-middleware 的正确方法是什么？ 任何帮助都会非常有用！ 谢谢

Answer 1

正如您从 MDN 中看到的

"Access-Control-Allow-Origin": "*"

标头是一个响应类型标头，这意味着它应该出现在您的服务器响应中。另外，我建议您不要使用

*

符号，相反，我宁愿将其与请求中的原始标头相匹配。

Answer 2

CORS 策略是一项且仅由 Web 服务器及其设置管理的策略。为了允许 CORS 请求，必须在服务器端实现。没有机会从您的客户端应用程序中执行此操作。

基本上它只是一个标头设置（下面是 NodeJS 的示例）：

res.header("Access-Control-Allow-Origin", "*")

发送该标头将允许来自每个域的请求。