axios跨域及设置完跨域本地请求没有问题,线上请求报404

背景说明:

  本猿原来是java后端开发,最近公司和第三方公司有对接做了一个前端项目,由于以前没有接触过vue和node.js,在此记录一下vue跨域中遇到的问题;

  开始开发时代码写完,在请求时发现请求第三方接口时报400错误,检查IP、端口、接口名都没有问题,网上搜了一下前端大神都说是需要设置跨域,在index.js文件中配置,代码如下:

proxyTable: {
        '/users': {
          target: 'http://128.17.***.***:**',
          changeOrigin: true, //跨域
          secure: false,
          pathRewrite: {
            '^/users': '/users'
          }
        },
        '/token': {
        target: 'http://128.17.***.***:**',//测试
        changeOrigin: true, //跨域
        secure: false,
        pathRewrite: {
          '^/token': '/token'
        }
      }

 

截图附上:

配置完后,在请求的地方改为:

this.axios.post('/token', params)
            .then(function (value) {
                                accessToken = value.data.accessToken;
                                expiresIn = value.data.expiresIn;
                console.log("获得令牌accessToken:"+value.data.accessToken);
                                console.log("获得令牌expiresIn:"+value.data.expiresIn);
                                if(accessToken != undefined){
                                    getUserInfo(accessToken,code);
                                }
            })
            .catch(function (reason) {
                console.log(reason);
            });

设置完之后重启,再次请求,果然好用(也是慢慢摸索,苦逼很少写前端代码)。

本地开发环境好使了,然后打包升级到测试环境,发现请求报404,开始以为跨域设置的问题,对比了一下发现没有问题,然后仔细看一下前端报错:

发现请求第三方地址是测试环境的地址,地址有问提,请求的不是第三方的地址,想到了配置nginx配置代理:

location /users {
            proxy_pass http://webserver6;
            proxy_set_header HOST $host:$server_port;
            proxy_set_header X-Real-IP $remote_addr;
            #proxy_read_timeout 1800s;
            #proxy_set_header Upgrade $http_upgrade;
            #proxy_set_header Connection "Upgrade";
            #proxy_http_version 1.1;
            access_log logs/shunfeng.log  postlog;
            access_log logs/shunfengUrl.log main;    
        }

upstream webserver6{
       server  128.17.***.**:**  weight=1 max_fails=3 fail_timeout=3;
    }

重启nginx,再次请求,成功!搞定。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王帅朋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值