前端vue知名网站建设定制配置反向代理 proxy 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});
1
2
3
4
5
6

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               }        }}  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

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

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