Vue-cli集成axios请求出现CORS跨域问题及解决
作者：凌晨小街
这篇文章主要介绍了Vue-cli集成axios请求出现CORS跨域问题及解决方案,具有很好的参考价值,希望对大家有所帮助,
Vue-cli集成axios请求出现CORS跨域问题
今天仍然在学习Vue，出现了一个我意料之中的问题
请求跨域问题
我想通过主机来访问豆瓣里面的json数据
首先按照python爬虫的思想，我掏了一个豆瓣json数据的url地址信息及参数
① 基本url： https://movie.douban.com/j/search_subjects
②请求参数如下：
- type:‘movie’,
- tag:‘热门’,
- page_limit:50,
- page_start:0
二话不说开始用axios进行数据请求，
那么如果没有axiso，请先下载
npm i axios
App.Vue的代码如下
<template>
<button @click="getData">axios获取请求</button>
</template>
<script>
import axios from 'axios';
// 联系网址：https://movie.douban.com/j/chart/top_list?type=5&interval_id=100%3A90&action=&start=0&limit=20
export default {
methods: {
getData(){
axios.get('/ysj/j/search_subjects'
,{
params:{
type:'movie',
tag:'热门',
page_limit:50,
page_start:0
}
}
)
.then(res => {
console.log('请求成功',res)
})
.catch(err => {
console.error('请求失败',err);
})
}
},
}
</script>
<style>
</style>
同时在vue.config,js里面配置代理服务器
module.exports = {
pages:{
index:{
//程序的入口
entry:'src/main.js',
},
},
lintOnSave:false, //关闭语法检查
// 开启一个Vue的代服务器，后面端口视自己请求的端口修改
// devServer: {
// proxy: 'https://movie.douban.com'
// }
/**
* 1、/ysj 是加到实际请求的端口后面
*
* 2、而在实际请求中，浏览器请求发给代理服务器
* ，代理服务器也会携带/ysj内容，这样子无法获取数据
* ，所以用正则表达式将/ysj拿掉，也就是pathRewrite
*
* 3、ws是webSocket的简写，默认是true
*
* 4、changeOrigin为true代表当代理服务器给目标服务器发送请求时
* ，给出的与目标服务器一致的端口号， 防止目标服务器拦截我的请求
*/
devServer: {
proxy: {
'/ysj': {
target: 'https://movie.douban.com',
pathRewrite:{'^/ysj':''},
// ws: true,
changeOrigin: true
},
}
}
}最后由于写了pathRewrite进行了代理服务器到目标服务器路径的整理，请求成功了
总结
解决了跨域问题！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。