解决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）

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

一、vue.config.js中配置devServer

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

二、使用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上下浮动的手机价格

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

三、接口无误

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

这篇好文章是转载于：学新通技术网