webpack 解决前端跨域的原理及方法

跨域问题的产生就是请求不同域名下的资源被拒绝访问，是浏览器的‘同源策略’ 就是一种安全机制
协议、域名、端口 三者只要有一项不同就不可以访问
webpack解决跨域的原理：https://blog.youkuaiyun.com/weixin_43260760/article/details/84568440
解决方式：https://segmentfault.com/a/1190000016199721
https://blog.youkuaiyun.com/chenzhuozhu/article/details/83628875
https://www.cnblogs.com/goloving/p/8901189.html
着急的时候可以先看解决方法，不过更需要看原理，就是为什么能这么做。
个人理解：
“同源策略”是浏览器做的，所以在访问服务端的使用使用代理作为中间层，将发送请求的地址改为与服务端一样，接受到请求后，将服务端地址转为本地地址。

客户端发送请求时
不直接到服务器
而是先到代理的中间层
在这里将 localhost:8080 的这个域名装换为 www.nj1c.com，
再将请求发送到服务器
这样在服务器端收到的请求就是使用的www.nj1c.com域名
同理，当服务器返回数据的时候，也是先到代理的中间层
将 www.nj1c.com 转换成 localhost:8080；
这样在客户端也是在相同域名下访问的了

// webpack的配置
// vue cli 2.0 
// 文件 webpack.dev.config.js 下
devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable, // 此项是我们需要的 发现是引用其他文件 ，然后找到引用来源
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  // 引用来源文件 config/index.js
proxyTable: {
    '/apis/*': {    // 设置请求前增加的值，这个值会代替我们的网址进行请求
    // target: 'http://192.168.89.88:8986',    // 有多个后端的时候，注释可以方便切换
    target: 'http://192.168.89.88:7278',    // 这个就是我们设置的代理服务器地址
    changeOrigin: true,                    // 这个值就是用来跨域的，默认为false
    pathRewrite: {'^/apis': 'apis'}        // 实现替换的，将apis替换成apis,也可以设置为空
    }
// vue cli 3.0  3.0将配置文件整合到vue.config.js 中
devServer: {
        open: true,                                 //配置自动启动浏览器
        host: 'localhost',
        port: 8080,                                 // 端口号
        https: false,
        hotOnly: false,                             // https:{type:Boolean}
        proxy: {                                        // 配置跨域
            '/api':{
                target:'http://xxx.xx.xxx.xxx:8080', //源地址
                changeOrigin:true,                  //改变源
                ws:true,                            //是否代理websockets
                pathRewrite:{
                    '^/api':''
                }
            }
        },                                           // 配置跨域处理,只有一个代理
        before: app => { }
    },

这些基本上是在开发环境适用，到生产环境 还是需要服务端进行配置，基本就是将限制的请求头进行修改 具体服务端同学应该比较清楚。
这里这种修改 可以在本地连接生产环境 去对生产环境的问题进行排查

上面内容纯属自己加深记忆记录的，具体细节 请看推荐的几篇文章。