Vue和React跨域代理请求

Vue

设置dev环境的proxyTable

// config/index.js

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/': {
        target: 'http://192.168.100.82:8099', // 设置你调用的接口域名和端口号
        changeOrigin: true, // 跨域
        pathRewrite: {
          '^/': '/'
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080,
    autoOpenBrowser: true,
    useEslint: true,
    ... //其他配置
  }
  build: {
    ...,
    productionSourceMap: false, // 减小打包后的大小，不生成map文件
  }
}

 

React

使用creat-react-app构建项目时，设置package.json的proxy。

// package.json
{
  "name": "idp",
  "version": "0.16.0",
  "private": true,
  "proxy": "http://100.168....",
  "dependencies": {},
  "devDependencies": {}
}

React开发时，若需到打包路径404，可尝试在package.json中，加入 homepage属性。

Like：

// package.json
{
  "name": "idp",
  "version": "0.16.0",
  "private": true,
  "homepage": "/idp", // 服务器部署后，该项目的文件夹名称
  "proxy": "http://100.168....",
  "dependencies": {},
  "devDependencies": {}
}