React脚手架创建项目，跨域问题处理

一、 在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
})