vue解决跨域问题（Vue-CLI）[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

1. 创建vue.config.js文件；

打开项目，在vue项目的根目录下创建vue.config.js文件。

2.配置vue.config.js文件；

module.exports = {
    devServer: {
        proxy: {
            '/api': {                              //需要代理的接口
                target: 'http://39.98.***.211',    //目标服务器
                changeOrigin: true,                //是否跨域
                pathRewrite: { '^/api': 'api' },   //重写
            },
        },
    },
}

举一个栗子?：我需要访问的接口是：http://32.88.***.818/api/abb,123 ，”/api”是一个标识，告诉它只代理接口里面有 “/api” 这个字段的接口，我的目标服务器http://32.88.***.818，即target定义的，pathRewrite重写’^/api’: ‘/api’ 就是在代理是时候使用 /api 代理。

3.调用接口。

• 第一种情况，重写值为自身（pathRewrite: { ‘^/api’: ‘api’ }）

this.axios.get('/api/abb').then((res)=>{
    console.log(res)
})

• 第二种情况，重写值为空（pathRewrite: { ‘^/api’: ‘ ‘ }）

this.axios.get('/api/api/abb').then((res)=>{
    console.log(res)
})

注：此方法只适用于本地开发。如发布到生产环境接口与前端在不同域，需服务器配置代理。

• 配置代理中 module.exports 是什么意思？

   module.exports 对象是由模块系统创建的。在我们自己写模块的时候，需要在模块最后写好模块接口，声明这个模块对外暴露什么内容，module.exports 提供了暴露接口的方法。

• 配置代理中 devServer 是什么意思？

     浏览器如果需要开发某些特定功能，需要https浏览器才会给予功能权限， 则开发时我们需要在https环境 下面是配置一个webpack devServer的https环境。

•  配置代理中 proxy 是什么意思？

     proxy 也就是代理，可以帮助我们完成很多事情，例如对数据的处理，对构造函数的处理，对数据的验证，说白了，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。