Vue-cli集成axios请求出现CORS跨域问题

最新推荐文章于 2024-08-02 00:06:36 发布

凌晨小街

最新推荐文章于 2024-08-02 00:06:36 发布

阅读量2.3k

点赞数 1

分类专栏： # Vue 文章标签： vue 跨域 axios

本文链接：https://blog.csdn.net/ysj367635984/article/details/119452488

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了在Vue.js项目中使用axios进行数据请求时遇到的跨域问题及其解决方案。通过设置Vue.config.js的代理服务器，成功访问了豆瓣电影的JSON数据。关键步骤包括设置axios请求、配置代理服务器的pathRewrite以去除不必要路径，以及启用changeOrigin以确保请求正确发送。

摘要由CSDN通过智能技术生成

今天仍然在学习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
          },
        }
      }
}