proxy跨域代理

一、例：vue项目运行的地址：htpp://localhost:8080/

API接口项目运行的地址:http://www.escook.cn/api/users

由于当前的 API 接口没有开启 CORS 跨域资源共享，因此默认情况下，上面的接口无法请求成功！

通过代理解决接口的跨域问题

把 axios 的请求根路径设置为 vue 项目的运行地址（接口请求不再跨域）
```
//请求根路径
axios.defaults.baseURL = 'http://localhost:8080'
```
vue 项目发现请求的接口不存在，把请求转交给 proxy 代理
代理把请求根路径替换为 devServer.proxy 属性的值，发起真正的数据请求
代理把请求到的数据，转发给 axios

二、在项目中配置proxy代理

注意：

devServer.proxy提供的代理功能，仅在开发调试阶段生效
项目上线发布时，依旧需要API接口服务器开启CORS跨域资源共享

1.在main.js入口文件中，把axios的请求路径根路径改造为当前web项目的根路径

//axios.defaults.baseURL = 'http://www.escook.cn'
//配置请求根路径
axios.defaults.baseURL = 'http://localhost:8080'

2.在vue.config.js的配置文件，声明配置

module.export ={
    deServer:{
        //当前项目在开发调试阶段，
        //会将任何未知请求（没有匹配静态文件的请求）代理到http://escook.cn
        proxy:'http://www.escook.cn'
    }
}

proxy跨域代理

相关

标签