vue-cli 配置 vue.config.js 创建代理服务器 解决跨域问题

步骤:

1、创建 vue.config.js 文件
2、在 vue.config.js 中配置 devServer 
3、发送请求时,把远程服务器的域名端口改成本地域名、本地端口

vue-cli 3.x 以后的版本,不会在项目根目录生成 vue.config.js ,所以需要自己手动创建一个,以下是vue-cli官网的介绍:
在这里插入图片描述

创建 vue.config.js 文件:

修改此文件 需要重启vue项目才能生效
module.exports = {

    // lintOnSave: false,

    /**
     *  代理服务器跨域请求 原理:
     *      建立一个代理服务器 A ,端口与域名都与本地一致
     *      代理服务器 A 收到本地请求,进而向远程服务器 B 转发请求,获取数据 
     *         (服务器间的通信,是最原始的 http 通信,没有浏览器同源策略,所以不会有跨域问题)
     *      代理服务器 A 向 服务器 B 请求到数据,返回本地。实现跨域请求。
     *  
     *  代理服务器发送请求,会先访问本地服务器(vue-cli所在服务器)的 public 文件夹,
     *  如果访问的数据 public 文件夹下有,会优先返回本地文件
     */

    /**s
     *  开启代理服务器 方式一: 简版
     *      缺点:
     *          请求的文件,如果本地有,会优先返回本地资源
     *          只能配置一个代理服务器 
     */

    // devServer: {
    //     proxy: 'http://localhost:8888'
    // }

    /**
     * 开启代理服务器 方式二:
     *  
     *      可以开启多个代理服务器
     * 
     *      可以自定义请求前缀,避免访问到本地服务器资源
     */

    devServer: {
        proxy: { 
            // 这里配置请求前缀 该代理服务器 使用前缀 /api 调用
            '/api': {
            	// 目标服务器以及端口
                target: 'http://localhost:8888', 
                // 代理服务器转发请求时,去除自定义的 api 字段
                pathRewrite: { '^/api': '' }, 
                // 用于配置支持 webSocket
                ws: true,
                // 用于配置请求头中的 host 字段  若为 true , 则字段为目标服务器的 地址+端口
                changeOrigin: true 
            }
        }
    }
}

vue 组件:


<template>
    <div class="contanier">
        <button @click="getData">跨域请求数据(不带请求前缀)</button>
        <br>
        <br>
        <button @click="getData1">跨域请求数据(带请求前缀)</button>
        <br>
        <br>
        <button @click="getData3">不使用代理服务</button>
    </div>
</template>

<script>
import axios from 'axios'
export default {
 
    data() {
        return {
        }
    },
	
	// 请求的服务器以及端口,使用 vue-cli 本地运行的服务器端口,
    // 符合同源策略,代理服务器负责转发请求获取数据	

    methods: {
        // 请求方式一: 简版
        getData(){
            console.log('点击 不带请求前缀');
            axios.get('http://localhost:8080/index').then( response => {
                    console.log(response);
            })
        },

        // 请求方式二: 带请求前缀 api
        getData1(){
            console.log('点击 带请求前缀');
            // 自定义请求前缀,放在 端口后面
            axios.get('http://localhost:8080/api/index').then( response => {
                    console.log(response);
            })
        },

        getData3(){
            console.log('点击 不使用代理服务器');
            // 不使用代理服务器,直接访问端口 8888 
            axios.get('http://localhost:8888/index').then( response => {
                    console.log(response);
            })
        },
   
}
</script>

<style scoped>

</style>

node.js 简略服务器:

在这里插入图片描述

效果图:

在这里插入图片描述

node 服务器控制台:

在这里插入图片描述

  • 0
    点赞
  • 5
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

淡然若水.

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值