完美解决跨域问题【前后端实现方法】

橙子哈哈哈~

已于 2024-08-12 11:04:42 修改

阅读量363

点赞数 4

分类专栏： java 文章标签： java 前端 vue.js 跨域

于 2024-07-31 16:06:26 首次发布

本文链接：https://blog.csdn.net/qq_56966336/article/details/140824398

版权

java 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

浏览器的同源策略限制，向不同源（不同协议、不同域名、不同端口）发送ajax请求会失败，由于发起ajax请求的域为http://localhost:5173，而后台服务器的域为http://localhost:8080

所以浏览器会限制该请求的发送, 这种问题称为跨域问题, 跨域问题可以在服务器端解决,也可以在浏览器端解决

1、前端解决跨域

通过配置代理的方式解决：

在request.js中定义一个变量记录为公共的前缀（/api），会把当前前端源和/api拼接成新的url：http://localhost:5173/api。

之后vie.config.js中的proxy配置代理会检测请求路径是否有/api字符，有就会将请求的域名和端口（源）替换成target中的内容【一般只需要修改target中成自己的内容】，rewrite会将路径重写，把/api替换成“”，最后组成的请求url为：http://localhost:8080。

（1）request.js中配置统一前缀 /api

//定制请求的实例

//导入axios  npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = '/api';  
const instance = axios.create({baseURL})


//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;

（2）vie.config.js中配置代理

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // 服务配置
  server: {
    //配置代理
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端服务器地址
        changeOrigin: true, // 是否改变请求域名
        rewrite: (path) => path.replace(/^\/api/, '')//将原有请求路径中的api替换为''
      }
    }
  }
})

2、后端解决跨域

通过CORS解决跨域：

官网地址：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

CORS的全称为Cross-origin Resource Sharing，中文含义是跨域资源共享，
CORS 是跨域的一种解决方案，CORS 给了web服务器一种权限：服务器可以选择是否允许跨域请求访问到它们的资源。

方案一：在IndexController上添加@CrossOrigin注解

@RestController
@RequestMapping(value = "/admin/system/index")
@CrossOrigin(allowCredentials = "true" , originPatterns = "*" , allowedHeaders = "*") 
public class IndexController {

}

弊端：每一个controller类上都来添加这样的一个接口影响开发效率、维护性较差

方案二：添加一个配置类配置跨域请求（推荐）

@Component
public class WebMvcConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")      // 添加路径规则
                .allowCredentials(true)               // 是否允许在跨域的情况下传递Cookie
                .allowedOriginPatterns("*")           // 允许请求来源的域规则
            	.allowedMethods("*")
                .allowedHeaders("*") ;                // 允许所有的请求头
    }
    
}

3、微服务网关解决跨域

在application.yaml中加上:

      globalcors:
        cors-configurations:
          '[/**]':
            allowedOriginPatterns: "*"
            # 允许请求中携带的头信息
            allowedHeaders: "*"
            # 运行跨域的请求方式
            allowedMethods: "*"
            # 跨域检测的有效期,单位s
            maxAge: 36000