当前位置：首页 > news >正文

本地跑项目解决跨域问题

news 2025/8/9 15:56:53

跨域问题：

指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对 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

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

查看全文

http://www.lryc.cn/news/228309.html