React解决跨域
React在开发环境中解决跨域问题其实解决方法和vue的解决方法类似,此项目是使用create-react-app的方式创建的。于是我们去查看官方的解决方案:官方文档地址 其实原理和vue解决跨域方法类似,通过代理的方式来解决。方法一:修改package.json文件官方文档:具体操作:直接去package.json文件下,加上你的真实请求地址现在我们去发起请求试试,可能出现一个304的状态码,这
·
React在开发环境中解决跨域问题
其实解决方法和vue的解决方法类似,此项目是使用create-react-app
的方式创建的。于是我们去查看官方的解决方案:官方文档地址 其实原理和vue解决跨域方法类似,通过代理的方式来解决。
方法一:修改package.json文件
官方文档:
具体操作:
直接去package.json文件下,加上你的真实请求地址
现在我们去发起请求试试,可能出现一个304的状态码,这个时候只需要重启一下服务就好。
最终效果:
这就拿到数据了
方法二:手动配置解决跨域
查看官方文档:
首先让我下载一个http-proxy-middleware
第三发包,然后再在src文件夹下创建一个src/setupProxy.js
文件,并在文件写入如下代码
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',//请求的真实地址
changeOrigin: true,
})
);
};
通过如上方法就可以解决跨域了,注意重启一下服务。
更多推荐
已为社区贡献4条内容
所有评论(0)