前端解决跨域----代理跨域

跨域报错： CORS error

为什么会跨域

​ 先了解跨域的概念：发送请求的url的协议、域名、端口三者之间任意一个与当前页面的地址不同则视为跨域。

解决跨域

vue.config.js 设置代理跨域

module.exports = {
    devServer: {
      
        proxy: {
            '/api': {
                target: "http://kumanxuan.f3322.net:8001",
                pathRewrite: {
                    '^/api': ''
                },
                 changeOrigin: true
            }
        }
    }
}

target: "http://kumanxuan.f3322.net:8001"     //代理配置
//target  是 目标服务器地址  本地代理服务器请求数据的时候它会把我们本地的 http:localhost:8080 替换成http://kumanxuan.f3322.net:8001/

pathRewrite: {'^/api': ''} ,      //路径重写
//这里重写路径运行后就代理到对应地址
//如果不写这个 本地代理服务器补全路径后 就是  http:localhost:8080/api/XXX
//这和原接口地址 比较:  域名不一样，还多了一个 /api (这个在target已经处理过了) 
//所以我们要把他处理掉， 通过pathRewrite: {'^/api': ''} ，意思是 把 '/api' 替换成 '',

 changeOrigin: true,        //开启跨域代理
 //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

配置后，需要重启服务器！！！

request.js 使用axios发送请求，配置baseURL

import axios from 'axios'

 const  instance = axios.create({
    baseURL:'/api',
    timeout:15000,
})

instance.interceptors.request.use((config)=>{
    return config;
},(err)=>{
    return Promise.reject(err)
})

// 重写实例响应后拦截器
instance.interceptors.response.use((result) => {
   
    return result.data;
}, (err) => {
    return Promise.reject(err);
})

export default instance