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、最后,获取数据成功啦