プロジェクトを作成するためのスキャフォールディングに反応し、クロスドメインの問題を処理する

1 つ、config>webpackDevServer.config.js文件中进行配置

如果项目有config>webpackDevServer.config.js 可直接在该文件进行跨域的配置

proxy: {
  '/api': {
    target: 'http://localhost:3000', // 需要代理的服务器地址，客户端真正需要请求的地址
                                    // 我这里是本地启的服务，所以地址为 localhost:3000
    changeOrigin: true, //是否跨域
    pathRewrite: { '^/api': '/' }
  }
}

 構成後、「/api」で始まるリクエストが実際のサービス「http://localhost:3000」にプロキシされてリクエストされる ように、リクエストされた URL に /api を追加する必要があります。

聞く：

import {axios} from "./axios"


// 用户登录
export const userLogin = (data) => axios({
    url: '/api1/users/login',
    method: 'POST',
    data
})

1. 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
})