关于vue跨域的踩过的坑和解决方案

前提(需求)

解决方法:1、ngnix代理,2、后端请求资源 3、强大的说服能力

开发环境

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

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

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,本地已经可以获取到数据了,如果不行,建议拍两下电脑;

生产环境

1.nginx代理(以下请求地址都是瞎编,请勿复制,用你自己的)
开始配置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、强大的说服力
我:我没办法,做不了。
项目经理:那就不做了。

Logo

前往低代码交流专区

更多推荐