vue和react跨域配置

一、react跨域配置：
\node_modules\react-scripts\config\webpackDevServer.config.js

proxy: {
      "/api": {
        target: "https://suggest.taobao.com/sug?code=utf-8&q=",
        changeOrigin: true, // 是否跨域
        "pathRewrite": {
          "^/api": "/"
        }
      }
    }

二、vue跨域配置:
vue.config.js

module.exports = {
  configureWebpack:{
    resolve:{
      alias:{
        'components':'@/components',
        'network':'@/network',
        'views':'@/views'
      }
    }
  },
  outputDir: 'dist', //build输出目录
  assetsDir: 'assets', //静态资源目录（js, css, img）
  lintOnSave: 'error', //是否开启eslint
  devServer: {
    open: true, //是否自动弹出浏览器页面
    host: "localhost",
    port: '80',
    https: false, //是否使用https协议
    hotOnly: true, //是否开启热更新
    overlay: {
      warnings: true,
      errors: true
    },
    chainWebpack: config => {
      config.module.rule('eslint').use('eslint-loader').loader('eslint-loader').tap(opt => {
          opt.emitWarning = opt.emitError = opt.failOnWarning = opt.failOnError = true;
          return opt;
      });
    },
    proxy: {
      '/api': {
        target: 'https://music.163.com/api/', //API服务器的地址
        secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': ''
        },
        // 突破host和origin的限制
        headers: {
          referer: 'http://music.163.com',
          origin: 'http://music.163.com',
          host: 'music.163.com'
        }
      },
    },
  },

  
  chainWebpack: config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')

      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })

      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })

    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')

      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }

}

上线后，服务器上nginx再配个反向代理

总结，vue和react跨域配置，主要是下面这段代码，和react一样：

proxy: {
      '/api': {
        target: 'https://music.163.com/api/', //API服务器的地址
        secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': ''
        }