如何使用 reactjs 和 webpack 允许 Access-Control-Allow-Origin？

Posted 2023-03-04

【中文标题】如何使用 reactjs 和 webpack 允许 Access-Control-Allow-Origin？

【英文标题】：How to allow Access-Control-Allow-Origin using reactjs and webpack?

【发布时间】：2017-05-18 14:59:07

【问题描述】：

我正在使用 webpack 在本地服务器上运行 reactjs。我需要从我的 reactjs 应用程序（客户端）向后端进行 ajax 调用，后端也是本地托管服务器，但使用不同的端口。当我从邮递员向我的后端发出请求时，没有问题。但是当我尝试从我的 react js 应用程序中做同样的事情时，我的控制台中出现了这个错误：

XMLHttpRequest cannot load http://localhost:8888/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Uncaught (in promise) Error: Network Error
at createError (createError.js:15)
at XMLHttpRequest.handleError (xhr.js:87)

这似乎是一个 C.O.R.S 问题。在互联网上研究了几个小时后，我找不到解决方案。

这是我的代码

反应：

handleClick()
      console.log('focused')
      axios.get('http://localhost:8888/api').then(function(result)
        console.log(result)
      )
    

webpack 配置

devServer: 
     contentBase: 'http://localhost',
     port: 8888,
     // Send API requests on localhost to API server get around CORS.
     proxy: 
        '/api': 
           target: 
              host: "localhost",
              protocol: 'http:',
              port: 3000
           
        
     


  

感谢您的帮助

【问题讨论】：

这看起来很像服务器端错误。你介意分享 /api 路由的代码吗？

您是否尝试将 cors 标头添加到 devServer 配置中？ github.com/webpack/webpack-dev-server/issues/533

@DavinTryon 我已经在 devServer 对象中添加了 cors 标头，就像在示例中解释的那样，但仍然是同样的问题

【参考方案1】：

尝试在没有主持人的情况下拨打电话：

handleClick()
     console.log('focused')
     axios.get('/api').then(function(result)
        console.log(result)
     )

【讨论】：

感谢您的帮助。它不起作用。我收到一个错误404 (Not Found)