关于vue生产环境跨域的踩过的坑和解决方案

前提（需求）

最近做一个功能需要请求三方资源.json文件，因为之前用jquery的时候使用ajax-jsonp很容易就get到了数据，
但是我发现请求三方接口和三方资源还是有区别的，无论vue-json和jquery我都在vue项目里面尝试（即使原理都是jsonp）但是chorme浏览器都会告诉你资源请求被锁定，这是浏览器的安全策略，img你可以随便拿，但是文件你最好别拿,safari则不会告诉你这些，它的network已经获取到了资源，但是不会给你，因为这不是一个正常的接口，我的心态已经崩了，我的解决方法：1、ngnix代理，2、后端请求资源 3、强大的说服能力

开发环境

找不到问题就百度，Google，发现网上的答案千篇一律，通过vue-cli脚手架搭建的项目会有一个config-index.js,添加proxyTable重写url来访问资源，试问在场的那个靓仔不知道？但是我得吐槽一下

1. 开发环境是有本地服务的，也就是说你的本地服务就是一个服务器；
2. build打包的dist文件是静态资源，放在服务器上是还是静态资源，客户端运行的只是浏览器支持的JS脚本文件而已；
3. 上传后发现你之前配置的proxyTable的接口请求都是404；
4. 如果我做开发不是为了上线，那我在干嘛？闹着玩吗？
5. 第四点是我发给那些只发开发环境跨域解决方案的睿智博主们的；
6. 本文重点不在开发环境，上面五条千万别看;

生产环境

1.nginx代理(以下请求地址都是瞎编，请勿复制，用你自己的)

dev环境下你配置了代码如下,开发环境跨域是没问题了
请求资源:http://tencent.com/test.json

proxytable代码如下:

proxyTable: {
      '/tencent': {//这是标识!!!!!!!
        target: 'http://tencent.com',//三方接口地址域名
        changeOrigin: true,//是否允许跨域
        pathRewrite: {
          '^/tencent': '',//根据标识重写!!!!!!!
        }
      }
    },

代码请求如下

   axios
        .get("/tencent/test.json") //注意这个/tencent就是上面设置的标识!!!!!!!
        .then(res => {
          console.log(res);
        })
        .catch(error => {
          console.warn(error);
        });

重启服务npm run dev，本地已经可以获取到数据了,如果不行，建议拍两下电脑;
开始配置nginx
编辑nginx.conf,加上下面这一条，看不懂你把这个代码改成自已需要的然后直接贴给运维，人家30秒就能搞定

 location /tencent/ {
              proxy_pass http://tencent.com/;//最好先用http而不是https，
              //如果服务器有ssl证书配置当我没说
      }

测试并重启nginx服务

cd /usr/local/nginx/sbin
./nginx -t //测试通过了在重启别一天天的自信重启还找不到问题
./nginx -s reload

然后打包上线，最后还要大声的喊出来：‘你们都是垃圾！’

2、后端请求资源
这个很容易理解了，后端专门写一个获取三方资源的接口暴露给前端：
前端-后端api-后端收到请求-后端获取三方资源-后端拿到三方资源-后端将资源返回给前端；
很明了也很实用，但是我没有用过，因为后端都很忙，我要是搞不出来人家还以为我实力不行，那我以后还怎么混，对，我是不会用这种方法的；

3、强大的说服力
我：这个…你看这个…嗯…这个问题是浏览器的问题，我没办法，做不了。
项目经理：好吧，那就不做了。