静态资源跨域问题——cors解决

本文探讨了前端开发中常见的跨域问题,详细解析了跨源资源共享(CORS)的原理与实现方法,包括HTTP首部字段的作用及配置,如Access-Control-Allow-Origin等,并介绍了JSONP作为另一种解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

由于静态资源一般会在另一个服务器里,所以如果前端访问,由于浏览器的同源策略,域名,端口号,协议不一样就容易引起跨域问题。
主要解决方案:

方案一

cors解决方案:
跨源资源共享 Cross-Origin Resource Sharing(CORS) 是一个新的 W3C 标准,它新增的一组HTTP首部字段,允许服务端其声明哪些源站有权限访问哪些资源。换言之,它允许浏览器向声明了 CORS 的跨域服务器,发出 XMLHttpReuest 请求,从而克服 Ajax 只能同源使用的限制。

另外,规范也要求对于非简单请求,浏览器必须首先使用 OPTION 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求,在服务器确定允许后,才发起实际的HTTP请求。对于简单请求、非简单请求以及预检请求的详细资料可以阅读HTTP访问控制(CORS) 。

HTTP 协议 Header 简析
下面对 CORS 中新增的 HTTP 首部字段进行简析:

Access-Control-Allow-Origin

响应首部中可以携带这个头部表示服务器允许哪些域可以访问该资源,其语法如下:

Access-Control-Allow-Origin: | *
其中,origin 参数的值指定了允许访问该资源的外域 URI。对于不需要携带身份凭证的请求,服务器可以指定该字段的值为通配符,表示允许来自所有域的请求。

Access-Control-Allow-Methods

该首部字段用于预检请求的响应,指明实际请求所允许使用的HTTP方法。其语法如下:

Access-Control-Allow-Methods: [, ]*
Access-Control-Allow-Headers

该首部字段用于预检请求的响应。指明了实际请求中允许携带的首部字段。其语法如下:

Access-Control-Allow-Headers: [, ]*
Access-Control-Max-Age

该首部字段用于预检请求的响应,指定了预检请求能够被缓存多久,其语法如下:

Access-Control-Max-Age:

Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。其语法如下:

Access-Control-Allow-Credentials: true
另外,如果要把 Cookie 发送到服务器,除了服务端要带上Access-Control-Allow-Credentials首部字段外,另一方面请求中也要带上withCredentials属性。

但是需要注意的是:如果需要在 Ajax 中设置和获取 Cookie,那么Access-Control-Allow-Origin首部字段不能设置为* ,必须设置为具体的 origin 源站。详细可阅读文章CORS 跨域 Cookie 的设置与获取

因为我使用的nginx服务,所以直接在静态资源库配置允许跨域。

注意:允许跨域是后面加上的,本来最外层http配置了,但是因为静态资源设置了缓存,所以需要再设置跨域。
在这里插入图片描述

方案二

JSONP
参考这篇文章

### 配置JWT以取消或绕过静态资源的Token验证 为了使应用程序能够识别并跳过特定路径下的请求(如静态资源),可以利用`WebSecurityConfigurerAdapter`中的方法来自定义安全配置。通过重写`configure(WebSecurity web)`方法,允许指定哪些URL模式不需要经过Spring Security过滤器链的安全检查。 对于静态资源而言,通常位于项目的`/resources/**`, `/static/**`, 或者其他预设目录下。因此,在实现自定义的安全配置时,应当明确指出这些位置作为无需身份验证即可访问的目标: ```java @Override public void configure(WebSecurity web) throws Exception { web.ignoring() .antMatchers("/css/**", "/js/**", "/images/**"); } ``` 上述代码片段展示了如何忽略对CSS、JavaScript以及图片文件夹内所有内容的身份验证需求[^1]。 另外一种做法是在基于`WebMvcConfigurer`接口创建配置类的情况下,同样可以通过覆盖相应的方法达到相同的效果。不过具体到JWT场景,则更倾向于调整其拦截逻辑而非整个框架层面的行为控制。此时可以在构建用于解析JSON Web Tokens (JWTs) 的过滤器过程中加入条件判断语句,当检测到来自静态资源路径的请求时不执行token校验流程[^2]。 例如,如果使用的是类似于Shiro这样的权限管理工具配合JWT插件的话,那么就可以在编写Filter的时候做如下处理: ```java if (!request.getRequestURI().startsWith(request.getContextPath() + "/api/") || request.getRequestURI().matches("^/(css|img|fonts)/.*")) { chain.doFilter(req, res); } else { // 进行jwt token 解析 和 用户信息填充... } ``` 此段伪代码表示只有那些不是API调用也不是加载静态资源的HTTP请求才会被送入后续的身份验证环节;而对于匹配上正则表达式的静态资源请求,则直接放行[^3]。 至于设置响应头中携带cookie的操作并不直接影响到此处讨论的主题——即如何让某些类型的网络请求免受JWT机制的影响。但是值得注意的是,在实际开发当中确实经常会在返回给客户端的数据包里附加诸如session id之类的标识符以便维持会话状态。而这里提到的方式则是另一种常见的资源共享(CORS)解决方案的一部分[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值