解决403 Forbidden问题

爱被打了一巴掌 2024-02-19 08:11 40阅读 0赞

#### 目录 ####

*  解决403 Forbidden问题
 *   *  场景
     *  原因
     *  解决
     *  注

## 解决403 Forbidden问题 ##

### 场景 ###

一般403出现在前端跨域调用后端接口的情况下。

如vue前端通过http的方式请求后端接口时：

浏览器状态码：Status Code: 403。

此时控制台错误信息为：Access to XMLHttpRequest at ‘http://localhost:8048/tools/auth/login’ from origin ‘http://localhost:8888’ has been blocked by CORS policy: **Response to preflight request doesn’t pass access control** check: 'No Access-Control-Allow-Origin’**header is present on the requested resource.**

![403前端报错信息][403]

### 原因 ###

前端URL: http://localhost:8888/  
后端URL: http://localhost:8048/tools/auth/login

请求url中协议http、域名localhost、端口8048，前后端之间三者有任意一者不同时，即为跨域！！！

可见，该例子中端口不同，存在跨域问题。

### 解决 ###

前后端跨域问题可以通过在后端添加CorsFilter来处理CORS问题。  
代码如下：

package com.anban.internaltools.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: 
     * @Date: 2023/8/15 14:50
     * @Description: 添加描述
     */
    @Configuration
    public class MyCorsConfig {
        
        @Bean
        public CorsFilter corsFilter() {
        
            CorsConfiguration configuration = new CorsConfiguration();
    //        configuration.addAllowedOrigin("http://localhost:8888");// 允许谁跨域
            configuration.addAllowedOrigin("*");// 允许所有人跨域
            configuration.setAllowCredentials(true);// 传cookie
            configuration.addAllowedMethod("*");// 允许哪些方法跨域 post get
            configuration.addAllowedHeader("*");// 允许哪些头信息
    
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            source.registerCorsConfiguration("/**", configuration);// 拦截一切请求
    
            return new CorsFilter(source);
        }
    }

### 注 ###

若后端设置为：

configuration.addAllowedOrigin("http://localhost:8888");// 允许谁跨域

此时需要留意前端服务，从本地调试完毕部署服务器时，一定要留意前后端服务部署ip和端口是否符合配置，否则容易出现，vue前端项目部署成功后，无法访问后端，一直报错403 Forbidden。

若出现以上问题，将后端配置更改为：

configuration.addAllowedOrigin("*");// 允许所有人跨域

如果不想放开所有地址的跨域访问，也支持多名单设置：

configuration.addAllowedOrigin("http://localhost:8888");// 允许谁跨域
    configuration.addAllowedOrigin("http://192.168.7.9:80");
    configuration.addAllowedOrigin("http://15.173.5.188.:8080");

[403]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/0bc8b6a372414da58d1242d14e8090b9.png