vue.config.js跨域配置

七叶柚

已于 2023-03-23 10:17:19 修改

阅读量762

点赞数

文章标签： vue.js javascript 前端 Powered by 金山文档

于 2023-03-23 10:07:58 首次发布

本文链接：https://blog.csdn.net/silbier/article/details/129724999

版权

文章讲述了在Vue.js应用中遇到跨域问题时如何配置vue.config.js来实现接口代理，以解决不同源的请求限制。具体方法包括在devServer中设置proxy，将目标接口地址映射到实际API，启用跨域并重写路径。

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

跨域问题：是指当你的请求路径中协议、域名、端口号任意一个不同时会产生的问题。

比如你的请求路径为：http://iwenwiki.com/api/FingerUnion/list.php

协议：挂在路径最前面的http即为协议（也可能是https）

域名：iwenwiki.com即为域名（一般在协议之后，api或数据之前）

端口号：默认端口号是8080（一般不变）

跨域问题页面的配置

<template>
    <div>
        <h3 @click="c">跨域问题解决方案</h3>
    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        methods: {
            c() {
                axios.get("/api/FingerUnion/list.php")
                    .then(res => {
                        console.log(res.data)
                    })
            }
        }
    }
</script>

vue.config.js的配置

module.exports = {
    devServer: {
        proxy: { //配置跨域
            '/api': {
                target: 'http://iwenwiki.com', //这里应该填写你们真实的后台接口
                ws: true,
                changOrigin: true, //允许跨域
                pathRewrite: {
                    '^/api/FingerUnion/list.php': '' //请求的时候使用这个api就可以
                }
            }
        }
    }
}