一、 在config>webpackDevServer.config.js文件中进行配置
如果项目有config>webpackDevServer.config.js 可直接在该文件进行跨域的配置
proxy: {
'/api': {
target: 'http://localhost:3000', // 需要代理的服务器地址,客户端真正需要请求的地址
// 我这里是本地启的服务,所以地址为 localhost:3000
changeOrigin: true, //是否跨域
pathRewrite: { '^/api': '/' }
}
}
配置之后,请求的url中需要添加 /api 这样就会把以 " /api" 开头的请求,代理到实际要请求的 'http://localhost:3000' 这台服务上面去
请求:
import {axios} from "./axios"
// 用户登录
export const userLogin = (data) => axios({
url: '/api1/users/login',
method: 'POST',
data
})
一、 使用 http-proxy-middleware 来实现
如果项目中没有config>webpackDevServer.config.js
文件,那么也可以使用http-proxy-middleware 来实现
1、首先在src下面新建 setupProxy.js文件 然后进行如下的配置
//http-proxy-middleware不需要npm导入,脚手架已经导入了这个包
//如果没有 可以自己再 npm install http-proxy-middleware
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
createProxyMiddleware('/api1', {
target: 'http://localhost:3000', //要代理的服务器
changeOrigin: true,
pathRewrite: { '^/api1': '' }
}),
//当然也可以配置过个代理
createProxyMiddleware('/api2', {
target: 'http://localhost:8000',
changeOrigin: true,
pathRewrite: { '^/api2': '' }
})
)
}
2、请求发送
import {axios} from "./axios"
// 用户登录
export const userLogin = (data) => axios({
url: '/api1/users/login',
method: 'POST',
data
})