在前后端的开发中总是难免会遇到前后端的跨域问题，比如当前后端的端口不一致时就无法对后段的数据进行访问，跨域问题说白了其实就是让前后端的数据能够通过不同的接口相互访问，当后端部署到云服务器时前端就必须要使用跨域配置来访问服务器的接口。

跨域配置的主要文件在vue的util目录下的request文件和，src根目录的vue.config文件夹进行设置

首先要在vue.config文件进行编辑

写入以下内容

// 跨域配置
module.exports = {
  devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
    port: 9898,  //把8080变9876
    proxy: {                 //设置代理，必须填
      '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
        target: 'http://43.139.185.137:8080',     //代理的目标地址
        changeOrigin: true,              //是否设置同源，输入是的
        pathRewrite: {                   //路径重写
          '^/api': ''                     //选择忽略拦截器里面的内容
        }
      }
    }
  }
}

然后在前端的src目录下创建util目录，创建request文件

然后在request中写入以下内容

import axios from 'axios'
import router from "@/router";
import user from "@/views/sponsor/User";   //引入axios包

const request = axios.create({
    baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，
    // 页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
    timeout: 5000
})

const whiteUrls = ["/user/login", '/user/register']

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config =>                       {
        config.headers['Content-Type'] = 'application/json;charset=utf-8';
        // config.headers['token'] = user.token;  // 设置请求头
        //取出sessionStore里面的缓存信息
        let userJson = sessionStorage.getItem("user")
        //获取登录session里面的登录信息，如果未登录传输use信息将直接拦截
        console.log('session');
        console.log(userJson)

        if (!whiteUrls.includes(config.url)){
            if (!userJson) {
                router.push("/login");
            }else {
                let user = JSON.parse(userJson);
                config.headers['token'] = user.token;  // 设置请求头
            }
        }

        return config;
    },
    error => {
        return Promise.reject(error)
    });

export default request

最后别忘了在最后加上export default request，将其设置为默认的路由配置

跨域原理的配置是在前端全局路由访问中添加添加api，而后vue。config就会对api这个字段进行解析，将需要访问的后端接口写入从而能够访问到后端的接口

从浏览器中我们可以看到他的请求网址

 

另外，在request中我们还能够写简单的前端拦截器

其原理其实很简单，就是访问浏览器中的session，对session进行查询，如果有用户的登录信息就不进行拦截，如果没有就强制跳转到登录页面

以上内容为本人的学习经验，仅作参考，如有错误的地方恳求各位指正。就酱~