项目中遇到请求跨域问题,我们一般需要项目中配置代理解决。
我的项目是create-react-app2.0版本生成的。
- 首先安装包
http-proxy-middleware
npm install http-proxy-middleware --save
# or
yarn add http-proxy-middleware
- 然后在src目录下创建 setupProxy.js 文件
- 最后设置代理
// setupProxy.js
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
proxy('/api', { //`api`是需要转发的请求
target: 'http://localhost:5000', // 这里是接口服务器地址
changeOrigin: true,
})
)
}
这里需要注意的是我们的axios的baseURL,设置的时候不能还设置加上原来服务器域名的地址,应该只设置 /api
就好了,我是在这里犯了错误
axios.defaults.baseURL = '/api';
我们请求数据的时候就可以
axios.post('/v1/register');
经过上面几个步骤我们应该是能跨域访问服务器了。