Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘ he

完整报错:

Access to XMLHttpRequest at 'http://localhost:58081/api/v1/house/page' from origin 'http://localhost:5173' 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.

报错场景:

使用axios请求,并在请求头添加token,发送请求,后端能成功接收请求,但请求头没有token,导致过滤器拿不到token进行校验。

错误的产生原因是在使用axios发送请求的时候,加入了自定义请求头headers: { ‘Content-Type’: 'application/j // 其他需要的头},然后 axios 就会产生options试探请求。
是配置的过滤器拦截了预检请求(preflight request)。预检请求是一种由浏览器自动发送的、使用OPTIONS方法的HTTP请求,它用于检查实际请求是否可以被服务器接受。

解决:

当你的拦截器拦截到这种OPTIONS请求时,如果没有正确地处理(例如,返回正确的CORS头部信息),那么浏览器就会认为服务器是不可连接到的所以阻止实际的请求发送,所以我们需要确保拦截器在处理OPTIONS请求时,返回正确的CORS头部信息。要在拦截器中检查请求的HTTP方法,如果是OPTIONS方法,那么就直接返回一个包含正确CORS头部信息的响应。

需要在权限认证过滤器添加如下代码:

  // 处理预请求的代码
            if ("OPTIONS".equals(((HttpServletRequest) request).getMethod())) {
                ((HttpServletResponse) response).setHeader("Access-Control-Allow-Origin", "*");
                ((HttpServletResponse) response).setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, HEAD, OPTIONS");
                ((HttpServletResponse) response).setHeader("Access-Control-Allow-Headers", "*");
                ((HttpServletResponse) response).setHeader("Access-Control-Allow-Credentials", "true");
                ((HttpServletResponse) response).setStatus(HttpServletResponse.SC_OK);
                return;
            }

跨域问题是由于浏览器的同源策略导致的,同源策略要求网页只能访问与其来源相同的资源。当一个网页向不同源的服务器发送请求时,浏览器会进行跨域检查,如果服务器没有正确配置跨域访问的响应头,就会出现"Response to preflight request doesn’t pass access control check: NoAccess-Control-Allow-Originheader is present on the requested resource"的错误。 解决这个问题的方法有多种,下面是两种常见的解决方案: 1. 在服务器端配置响应头信息,允许跨域访问。在服务器端的响应头中添加"Access-Control-Allow-Origin"字段,并设置为允许访问的域名或"*"(表示允许任意域名访问)。 示例代码如下(以Node.js为例): ```javascript // 设置允许跨域访问的响应头 res.setHeader('Access-Control-Allow-Origin', '*'); ``` 2. 使用代理服务器进行请求转发。在项目中配置一个代理服务器,将跨域请求转发到目标服务器,这样就可以绕过浏览器的同源策略限制。 示例代码如下(以Vue.js为例): ```javascript // vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', // 目标服务器地址 changeOrigin: true, // 允许跨域 pathRewrite: { '^/api': '' // 将请求路径中的/api前缀去掉 } } } } }; ``` 这样,当你在前端代码中发送请求到"/api"路径时,代理服务器会将请求转发到目标服务器,并将响应返回给前端,从而解决跨域问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值