Vue和React中配置代理服务器（实现proxy跨域请求）

满脑子技术的前端工程师

已于 2023-02-09 11:28:24 修改

阅读量1.4k

点赞数 2

分类专栏：代理服务器（Proxy、nginx、解决跨域）文章标签： vue.js 服务器 javascript

于 2021-12-13 22:13:50 首次发布

本文链接：https://blog.csdn.net/weixin_46022934/article/details/121915618

版权

代理服务器（Proxy、nginx、解决跨域）专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

一、Vue中通过配置代理服务器,进行跨域请求
- 1.文件设置目录的位置
- 2.对应的vue.config.js，代码如下
二、React的代理代理服务器设置（暂未提供）
三、总结

一、Vue中通过配置代理服务器,进行跨域请求

1.文件设置目录的位置

1.设置文件名(Vue.config.js)放在src同名文件下;;;;;如下图所示:

在这里插入图片描述

2.对应的vue.config.js，代码如下

2.vue.config.js中的代码如下

module.exports = {
    publicPath: "/", //打包后的配置文件 (启动页的地址)
    outputDir: 'dist', //打包之后的目录
    lintOnSave: true, //保存的时候监测语法格式
    devServer: {
        open: true, //默认打开页面
        host: '0.0.0.0', //0.0.0.0 本机地址
        port: 5000,
        https: false, //不支持https
        proxy: {
            "/myApi": {
                target: "http://m.douyu.com", //目标地址
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    //对什么类的服务器匹配
                    "^/myApi": ''
                }
            }
        }

    }
}