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

最新推荐文章于 2026-05-28 14:43:07 发布

原创最新推荐文章于 2026-05-28 14:43:07 发布 · 2.1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ajax #中间件 #http #react #javascript

各种bug及安装教程专栏收录该内容

11 篇文章

订阅专栏

本文介绍了浏览器的同源策略导致的跨域问题，以及如何通过设置代理服务器解决这个问题。在React项目中，使用http-proxy-middleware中间件创建setupProxy.js文件，配置代理目标地址并启用，然后利用axios发送请求，成功实现跨域获取数据。

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