前端Vue和后端egg.js解决跨越问题

前端vue使用devServer之proxy解决跨域

什么是跨域
跨域就是不同源，就是不满足协议、域名、端口都相同的约定

跨域请求devServer代理几种配置

1.先在项目的根目录下新建 vue.config.js 文件
2. 在module.exports内设置devServer来处理代理

第一种代理方式
把请求的url写成/allin/policy/getProductInfo

注意
请求的地址必须是/allin/policy/getProductInfo，而不是http://localhost:8081/allin/policy/getProductInfo，（下面的几种方式也是同样的）因为代理会检查请求开头是否为/allin，如果以http开头，则检查不匹配，则不走代理

 devServer: {
    proxy: {
        '/allin': {
            //要访问的跨域的域名
            target: 'http://www.test.com',
            ws: true, // 是否启用websockets
    	    //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样客户端端和服务端进行数据的交互就不会有跨域问题
            changOrigin: true,
        }
    }
}

相当于遇见/allin才做代理，则会把默认域名http://localhost:8081地址改成 target 对应的http://www.test.com地址，但是在浏览器的F12下，Network->Headers中看到还是http://localhost:8081/allin/policy/getProductInfo， 但是真正的请求的地址则是http://www.test.com/allin/policy/getProductInfo

注意
如果只是修改域名，则不需要写pathRewrite，但如果要写，则必须写成pathRewrite: {’^/allin’: ‘/allin’}，相当于把/allin标识还替换成/allin

第二种代理方式
把请求的url写成/api/allin/policy/getProductInfo

 devServer: {
     proxy: {
         '/api': {
             //要访问的跨域的域名
             target: 'http://www.test.com',
             ws: true,
             changOrigin: true,
             pathRewrite: {
                 '^/api': ''
             }
         }
     }
 }

相当于遇见/api才做代理，但真实的请求中没有/api，所以在pathRewrite中把’/api’去掉, 这样既有了标识, 又能在请求接口中把/api去掉

第三种代理方式
把请求的url写成/allin/getProductInfo

注意
这里请求时我没有写/polic，目的是在拦截跨域是我再加上

devServer: {
    proxy: {
        '/allin': {
            //要访问的跨域的api的域名
            target: 'http://www.test.com',
            ws: true,
            changOrigin: true,
            pathRewrite: {
                '^/allin': '/allin/policy'
            }
        }
    }
}

相当于遇见/allin则替换成/allin/policy，注意/policy后边没有/，这样拼接成功才会是http://www.test.com/allin/policy/getProductInfo

第四种代理方式
把请求的url写成/allin/getProductInfo
注意
这里请求时我没有写/polic，目的是在拦截跨域是我再加上

devServer: {
     proxy: {
         '/allin': {
             //要访问的跨域的api的域名
             target: 'http://www.test.com/allin/policy',
             ws: true,
             changOrigin: true,
             pathRewrite: {
                 '^/allin': '/'  //必须这样写
             }
         }
     }
 }

这里/allin相当于http://www.test.com/allin/policy
这里必须要写pathRewrite: { ‘^/allin’: ‘/’}，而且里边必须要写成’^/allin’: ‘/’，这里的斜杠代表的意思就是使用target中的/allin/policy，否则就要使用上面的方式把斜杠写成/allin/policy，并把target中只写域名，如果不写pathRewrite则请求不会成功。

注意
pathRewrite：如果不写则只能修改代理的域名，如果写则可以修改代理的域名和后边的路径

使用场景
我们开发的Vue项目大部分是用在App内的，而当我们写好一个功能后，如果想在真机上看看效果，那必须要提交到测试环境，然后App内配置好测试地址才可以正常访问。那我们能不能直接让App访问我们自己的IP地址呢，这样的话当在真机上出现问题时，可以先修改，避免了把错误的代码提交到测试环境上，而我们如果直接这么写，肯定会报跨域的问题，这里就需要用到代理机制了。我们就按照上面的几种方式设置代理就可以让App访问我们自己的机器上的代码了 [^1]: [mermaid语法说明](https://mermaidjs.github.io/

egg.js中使用egg-cors(跨域配置)

egg-cors 插件基于 @koa/cors。

安装

npm i egg-cors --save

配置插件

{app_root}/config/plugin.js：

exports.cors = {
  enable: true,
  package: 'egg-cors',
};

基本使用

{app_root}/config/config.default.js：

// 需要配合 security 插件一块使用
config.security = {
  // 关闭 csrf
  csrf: {
    enable: false,
  },
    // 跨域白名单
  domainWhiteList: [ 'http://localhost:3000' ],
};
// 允许跨域的方法
config.cors = {
  origin: '*',
  allowMethods: 'GET, PUT, POST, DELETE, PATCH'
};