本地跑项目解决跨域问题

爱吃biangbiang面2023-11-15 22:48

跨域问题：

指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对 javascript 施加的安全限制。

同源策略：

是指协议（protocol）、域名（host）、端口号（port），都必须相同，其中一个不同都会产生跨域。

www.test.com:8000　协议（http）、主域名（test）、子域名（www）、端口号（8000）

非同源限制

无法读取非同源网页的cookie、localStorage、IndexedDB

无法接触非同源网页的DOM

无法向非同源地址发送 AJAX 请求

方法一：配置代理

nginx配置代理

前端端口4200，后端端口8083，统一在代理中配置一个监听端口

复制代码

server {
        listen 80;  
  

		location / {
            proxy_set_header    Host $host;
            proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
			
            proxy_pass          http://localhost:4200;
            add_header          Access-Control-Allow-Origin *;
			proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-NginX-Proxy true;
        }
        
	    location /api/ {  
	        proxy_pass http://localhost:8083;  
	        proxy_set_header Host $host;  
	        proxy_set_header X-Real-IP $remote_addr;  
	  
	        # 添加允许跨域的配置  
	        add_header Access-Control-Allow-Origin *;  
	        add_header Access-Control-Allow-Credentials true;  
	        add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;  
	        add_header Access-Control-Allow-Headers X-Requested-With,Content-Type,Content-Length,Accept,Authorization;  
    	}  
    }

方法二：后端配置

写一个关于跨域的配置类CorsConfig

java 复制代码

@Configuration // 一定不能忽略此注解

public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        // 1.创建 CORS 配置对象
        CorsConfiguration config = new CorsConfiguration();
        // 支持域
        config.addAllowedOrigin("*");
        // 是否发送 Cookie
        config.setAllowCredentials(true);
        // 支持请求方式
        config.addAllowedMethod("*");
        // 允许的原始请求头部信息
        config.addAllowedHeader("*");
        // 2.添加地址映射
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**", config);
        // 3.返回 CorsFilter 对象
        return new CorsFilter(corsConfigurationSource);
    }

}