Access to XMLHttpRequest at *** from origin‘***' has been blocked by CORS policy: Response to preflight request ...

Access to XMLHttpRequest at *** from origin ‘null’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource

报错截图：

 

---

 

报错原因：

浏览器的同源策略约定我们只能在同源的情况下（即协议，域名，端口相同），才能成功请求数据，这里的目的url和http://localhost:3000/是非同源的，所以浏览器报错，告诉我们跨域了。

 

---

 

解决方式：

当遇到这个问题时，我是使用了中间件代理跨域（基于react），通过启用一个代理服务器，来接收目的接口提供的数据。

1、手动安装 http-proxy-middleware中间件

npm i http-proxy-middleware

2、在根目录创建一个setupProxy.js文件

const proxy = require('http-proxy-middleware')

module.exports = function(app){
    app.use(
        proxy("/webapi", {
            target: "https://name.52byte.com/",//目标地址
            changeOrigin: true //设置成true：发送请求头中host会设置成target 
        })

    )
}

3、利用axios发送请求

axios.post(`/webapi/webbrowser/GetEnglishNameListForWeb`, {
                realName: "",
                 gender: "male",
                 initialLetter: "", 
                 spell: "0", 
                 pronounce: "0", 
                 popularity: "1", 
                 pageIndex: 0
            }).then((response) => {
                // handle success
                console.log(response.data)
            }).catch(error => {
                // handle error
                console.log(error)
            }).then(() => {
                // always executed
            });

4、最后，获取数据成功啦