Vue-cli集成axios请求出现CORS跨域问题
Posted 菜小伙
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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进行了代理服务器到目标服务器路径的整理,请求成功了
解决了跨域问题!
以上是关于Vue-cli集成axios请求出现CORS跨域问题的主要内容,如果未能解决你的问题,请参考以下文章