关于vue前后端解决跨域问题

• 前端解决

1、在全局的main.js中引入axios

import axios from 'axios'

vue.prototype.$axios = axios

axios.defaults.baseURL = '/api'        //关键代码

2、在untils包中创建request.js

//导入axios包

import axios from "axios";

//导入element-ui包

import { Message } from 'element-ui'

//基本配置

const instance = axios.create({

    // baseURL: 'http://127.0.0.1:8088/',

    // http://localhost:8080/xsauth/login/

    timeout: 5000,  //5000毫秒，

    headers: {

        "Access-Control-Allow-Origin":"*",

        "Access-Control-Allow-Headers":"Content-Type,Content-Length, Authorization, Accept,X-Requested-With"

      }

   

})

//请求拦截

instance.interceptors.request.use(config => {

    // 在发送请求之前做些什么 验证token之类的

    // console.log("请求的数据:", config);

    // 设置请求头部分，这里举例使用了localStorage存储的token作为身份标识

    if (localStorage.getItem('token')) {

        config.headers.token = localStorage.getItem('token')

    }

    // config.headers['Authorization'] = localStorage.getItem('token');

    return config

}, error => {

    console.log(error);

    return Promise.reject(error);

});

// 响应拦截器

instance.interceptors.response.use(response => {

    const data = response.data;

    console.log(data)

    // 根据接口返回的状态码判断是否有错误

    if (data && data.code !== 200) {

        Message.error({ message: data.data.msg });

        // 非法进入时直接跳到登录页

        window.location.href = '/';

        return Promise.reject(new Error(data.message));

    } else {

        return data;

    }

}, error => {

    console.log(error);

    return Promise.reject(error);

});

export default instance

3、在api文件夹中创建userApi.js

import request from '@/utils/request';

export function getUser(){

    return request({

        url:'/admin/getUserAll',

        method:'get',

   

    })

}

4、在vue.config.js 中添加如下信息

  devServer: {

    proxy: {

      '/api': {   //以api开头的接口会被拦截

        target: 'http://127.0.0.1:8088/',// 后端接口

        changeOrigin: true, // 是否跨域

        pathRewrite: {

          '^api': ''   //去掉api

        }

      }

    }

  }

• 后端解决跨域问题

1. 在目标方法上加入@CrossOrigin注解
2. 添加CORS过滤器
3. import org.springframework.context.annotation.Bean;
   import org.springframework.context.annotation.Configuration;
   import org.springframework.web.cors.CorsConfiguration;
   import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
   import org.springframework.web.filter.CorsFilter;
   
   @Configuration
   public class CorsConfig {
   
       @Bean
       public CorsFilter corsFilter(){
           System.out.println("cros策略开始");
           CorsConfiguration configuration = new CorsConfiguration();
           configuration.addAllowedOrigin("*");
           configuration.addAllowedHeader("*");
           configuration.addAllowedMethod("*");
           UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
           source.registerCorsConfiguration("/**",configuration);
           return new CorsFilter(source);
       }

• 实现WebMvcConfigurer 中的addCorsMappings方法

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.config.annotation.CorsRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;



@Configuration

public class CorsConfigWeb implements WebMvcConfigurer {



    @Override

    public void addCorsMappings(CorsRegistry registry) {

        System.out.println("WebMvcConfigurer开始启动");

        registry.addMapping("/**")

                .allowedOriginPatterns("*")

                .allowedMethods("GET","DELETE","PUT","POST","HEAD","OPTIONS")

                .allowCredentials(true)

                .maxAge(3600)

                .allowedHeaders("*");

    }

}