在React环境中的跨域问题
上述错误是前端访问接口的时候出现的跨域错误,一般有两种解决方式,JsonP和cors两种解决方式,现提供cors的解决方式
router.all("/classinfo", function (req, res, next) {
在访问localhost3000:classinfo地址的时候出现跨域,把要访问的地址和解决的跨域地址写一致就行了
// 跨域处理
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
next();
})
参考地址:https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/proxying-api-requests-in-development.md#configuring-the-proxy-manually
1.开发环境跨域处理
proxy:代理
1.配置package.json文件:后台已经存在接口地址
"proxy":"http://tingapi.ting.baidu.com"
2.Configure the proxy yourself:自己搭建服务器的情况下
1.安装中间件:npm install http-proxy-middleware --save
2.在src根目录下创建setupProxy.js
3.在文件中添加如一下代码修改地址
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/api', { target: 'http://localhost:3001/' }));
};
2、自己的服务器请求别人的服务器,需要安装require