前端vue配置反向代理 proxy

前端vue配置反向代理 proxy devServer axios

*分析功能 我们在开发的过程中会遇到 请求接口报错
Access to XMLHttpRequest at *** from origin 需要跨域的报错信息

· 亿点小知识 跨域的几种方法

1. 后端 通过CORS解决跨域问题
2. 后端 通过 nginx反向代理
3. 前端可以通过 node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，
4. 前端 vue框架的 反向代理
5. 以上只举例了常见的几种跨域 其实跨域还有很多种方法如：document.domain + iframe跨域、postMessage，jsonp跨域、websocket、等等

这里只说明 前端vue框架的反向代理

1. 先检查自己的axios 配置

import axios from 'axios';
const instance = axios.create({
    
    
  baseURL：" http://10.0.0.7:8888/api", // 这里的api就对应了 proxy 配置的api
  timeout: 3000, // 请求响应的时间
  withCredentials: true,// axios 默认不会携带cookie
});

2. 配置反向代理

打开项目下vue.config.js ，配置devServer属性

devServer: {
    
    
    host: "0.0.0.0",// 允许外部ip访问
    port: 8080, // 自定义修改8080端口
    https: false,// 启用https
    open: false,//build自动打开浏览器
   proxy:{
    
    
            '/api':{
    
    // /api 是监听你请求的接口数据是否存在 /api 会把他替换成 target 的代理地址
                target: 'http://192.168.1.0:8000',//代理地址，这里设置的地址会代替axios中设置的baseURL
                changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
                //ws: true, // proxy websockets
                //pathRewrite方法重写url
                pathRewrite: {
    
    
                    '^/api': '/' 
                    //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.0:80001/xxxx
                    //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.0:80001/api/xxxx
               }
        }}
  },

3. 创建一个api.js专门存放接口

import instance from './request'; //导入配置好的axios
// 请求登录接口 
export const login = (data) =>
  instance({
    
    
    url: '/login', //这些是具体的路径 不会被代理掉
    method: 'POST',
    data,
  });

以上就是 前端 通过vue进行的 反向代理
如碰到 nuxt.js + vue ，或者其他框架的问题 可以私下我 一起探讨学习
可以关注收藏博客 作者会持续更新…