跨域项目中实现

首先看下这俩跨域解决方案
https://blog.csdn.net/weixin_33938733/article/details/91456883
重点很全面
https://www.jb51.net/article/124002.htm

做的项目中使用的是第二个链接中八下2
node+webpack-dev-server
自己做的这个项目中是这样配置的
在vue.config.js中

const webpack = require('webpack')
const path = require('path')
const resolve = dir => {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: '/KONKAMES',
  // productionSourceMap: true,
  lintOnSave: false,
  devServer: {
    // 设置代理
    port: '8181',
    proxy: {
      '/api/*': {
        // target: 'http://192.168.70.147:9050', // 后端服务器地址

        ws: false, // 是否启用websockets
        changOrigin: true, // 开启代理
        autoRewrite: true,
        cookieDomainRewrite: true,   //重写cookie的domain。可解决跨域本地和服务端用的域名不一致。比如本地localhost，服务端使用cookie和sessionid做登录状态保存，导致的跨域用的域名不一致。
        // 联调后端开发本地
        pathRewrite: {
          '/api': '/'
        }
        // 暂时无网关
        // 联调127生产环境，拼接网关
        // pathRewrite: {
        //   '/api': '/api/konkamestest'
        // }
      },
      // 用户中心相关api
      '/usercenter/*': {
        target: 'http://192.168.1.127:9995', // 目标域名
        ws: false, // 是否启用websockets
        changOrigin: true, // 开启代理
        autoRewrite: true,
        cookieDomainRewrite: true,
        pathRewrite: {
          '/usercenter': '/api/usercenterdev'
        }
      }
    }
  },
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery'
      })
    ]
  },
  chainWebpack: config => {
    config.resolve.symlinks(true)
    config.resolve.alias
      .set('@', resolve('src/'))
      .set('@views', resolve('src/views/'))
      .set('@utils', resolve('src/utils/'))
      .set('@components', resolve('src/components/'))
      .set('@images', resolve('src/assets/img/'))
      .set('@server', resolve('src/server/'))
      .set('@config', resolve('src/config/'))
  }
}