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进行了代理服务器到目标服务器路径的整理,请求成功了
总结
解决了跨域问题!
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。