场景
前端代码
import React,{ Component } from 'react'
import axios from 'axios'
class Hello extends Component{
getStudnetInfo() {
axios({
url: 'http://127.0.0.1:3001/student'
}).then(res=>{
console.log(res);
})
}
render(h) {
return <button onClick={ this.getStudnetInfo }>获取学生数据</button>
}
}
export default Hello
服务端代码
const express = require('express')
const app = express()
const port = 3001
app.use((req,res,next)=>{
console.log('访问服务器成功')
next()
})
app.get('/student', (req, res) => {
const students = [
{
stuId:1,
stuName: '猿小申'
},
{
stuId:2,
stuName: 'yaunxiaoshen'
}
]
res.send(students)
})
app.listen(port, () => console.log(`Example app listening on port port!`))
产生的结果
解释:http://localhost:3000/ 访问 http://localhost:3001,由于端口号的不同,产生了跨域,浏览器限制了数据的接收,并不是没有发送出去,而是服务器已经收到了,浏览器因为同源策略的原因拦截了数据。所以就出现了代理解决跨域。
react配置代理
- 简单的方法,直接在package.json中配置即可
注意:1. 配置完成,要重启编译。2. localhost和127.0.0.1域名不同也会跨域,这里要注意。
- 第二种方法
脚手架src目录下新建setupProxy.js
文件(不可改),采用command语法进行编写代码
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(
proxy('/api1', {
target: 'http://localhost:3001', // 代理转发的地址
changeOrigin: true, // 让服务端知道从哪发出来的
pathRewrite: {'^/api1': ''} // 将api1变成空
})
)
}
api1路径:当访问的接口路径中有api1时才会代理转发,pathRewrite将接口路径重写,去掉这api1,访问后端正常的接口。