目前开发的时候都是前后端分离,各自独立进行开发,虽然到最后前端和后端都会部署到同一台服务器上,但是在开发过程中,前端和后端需要进行联调,在这个过程中势必会出现跨域的问题。在写本文章之前我开发过程中遇到的跨域都是直接甩锅给后端,让后端的同学去解决,俗话说大前端小后端(开个玩笑,后端同学不要介意~),我们前端也应该具备解决跨域的能力。接下来就给大家介绍一下我刚才所尝试的前端来解决跨域的问题:
- 使用react脚手架create-react-app搭建一个基础的react项目目录
- 目录结构生成后在package.json文件中添加proxy配置,具体配置项如下:
我们具体讲一下各个配置项的含义"proxy": {
"/api": {
"target": "http://11.158.130.220:8080", //目标服务器
"changeOrigin": true,//默认false,是否需要改变原始主机头为目标URL
"pathRewrite": {"^/api" : "/"},// 重写请求,比如我们源访问的是api,那么请求会被解析为/
secure: false, //如果是https接口 需要配置这个参数为true}
}
-
配置完成之后一定要重启服务才会proxy配置项才会生效
-
重启的时候可能会报错(如下截图)这个时候需要删除node_module/react-scripts 然后执行npm i react-scripts@1.1.1 --save 再重启服务即可由前端解决跨域问题