解决前后端联调的跨域问题（三种方法，最详细）

原创已于 2024-04-16 17:56:38 修改 · 2.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#java #nginx

于 2024-04-16 17:56:11 首次发布

前后端常见问题专栏收录该内容

2 篇文章

订阅专栏

前提：在浏览器通过前端地址去访问后端的地址会出现跨域问题

1.各个浏览器的报错如下（如果符合，就说明你遇到的问题就是跨域问题）

chrome浏览器：

Access to XMLHttpRequest at 'http://localhost:63110/system/dictionary/all' from origin 'http://localhost:8601' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

firefox浏览器：

Bash
已拦截跨源请求：同源策略禁止读取位于 http://localhost:63110/system/dictionary/all 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。状态码：200。

2.原因：

被CORS policy阻止，因为没有Access-Control-Allow-Origin 头信息。CORS全称是 cross origin resource share 表示跨域资源共享。基于浏览器的同源策略，去判断是否跨域请求，同源策略是浏览器的一种安全机制，从一个地址请求另一个地址，如果协议、主机、端口三者全部一致则不属于跨域，否则有一个不一致就是跨域请求。

3.解决方法

第一种方法：JSONP（前后端改变）

通过script标签的src属性进行跨域请求，如果服务端要响应内容则首先读取请求参数callback的值，callback是一个回调函数的名称，服务端读取callback的值后将响应内容通过调用callback函数的方式告诉请求方，然后请求方再返回相应的结果。如下图：

第二种方法：添加响应头（后端添加配置）

服务端在响应头添加 Access-Control-Allow-Origin：*

详细代码如下（例子）：

编写xxxxConfig.java文件

package com.xuecheng.system.config;

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;

/**
* @Author: js
* @Description: 跨域过虑器
* @DateTime: 2024/4/15 9:42
* @Params:
* @Return
*/

@Configuration
public class GlobalCorsConfig {

    /**
     * 允许跨域调用的过滤器
     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //允许白名单 域名进行跨域调用
        config.addAllowedOrigin("*");
        //允许跨越发送cookie
        config.setAllowCredentials(true);
        //放行全部原始头信息
        config.addAllowedHeader("*");
        //允许所有请求方法跨域调用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}