解决vue跨域302,301,404,问题

(仅用于开发环境,上线项目使用nginx配置)

这里简单说一下配置的基本条件

目录

一、vue.config.js中配置devServer

二、使用axios发送请求

三、接口无误

以上三个都没问题了

要么就是修改了配置文件没有重启项目,解决:npm serve/npm dev(根据package.json来跑)

要么就是浏览器缓存没清,解决:ctrl+f5(强制清除刷新页面)

报301,再报cors,要么就是接口写错了,如https看成http,也可能是后端问题

报404,再报cors,要么就是参数传错了,或者接口不对

(如果是post请求,可以配置一下请求头header)

'Access-Control-Allow-Origin': '*',//是否被允许与给定的origin共享
'Access-Control-Allow-Method': '*',//类型,如post,put,get,delete
'Access-Control-Allow-Headers': '*',//请求头
'Access-Control-Allow-Credentials': 'true',//请求的响应暴露给页面。返回true
'Content-Type': 'text/html; charset=utf-8',//编码

一、vue.config.js中配置devServer

  devServer: {
    proxy: {
      '/api': {
        target: 'https://p.3.cn/',
        changOrigin: true,//允许跨域
        // ws: true, // 是否启用websockets
        secure: false,//默认为true,是否需要携带安全证书,即https时,是需要的,设置成false就不用了
        pathRewrite: {
          '^/api': '',//重写路径
        }
      }
    }
  }

二、使用axios发送请求

我这里使用的是vue3原型绑定axios

(这里的“/api”是进行了重写)

可以理解为:

当前域是:http://localhost:8080/api/prices/mgets?skulds=J_100011464875&type=1

当检测到/api时,会把/api以及之前的正则重写

即变成:https://p.3.cn/prices/mgets?skulds=J_100011464875&type=1

拿到的数据是4900上下浮动的手机价格

proxy.$axios.get('/api/prices/mgets', {
  params: {
    skuIds: 'J_100011464875',
    type: 1,
  }
}).then((res: any) => {
  console.log('跨域数据', res.data)
})

三、接口无误

1.京东获取单个商品价格接口:
1.//ps:商品ID这么获取:http://item.jd.com/954086.html(xxx.html的xxx就是商品的id)
2.http://p.3.cn/prices/mgets?skuIds=J_商品ID&type=1

  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值