Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin跨域问题

已于 2023-12-12 11:34:38 修改
阅读量3.6w 收藏 10
点赞数 9
分类专栏： 前端开发 跨域 文章标签： 前端 服务器 java
于 2022-07-11 11:10:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51758070/article/details/125716476
版权

出现问题：在本地运行，有配置vue.config.js中的proxy，所以解决了跨域问题。但将项目打包放到服务器上去，在打包的过程中，proxy是不会被打包进去的，也就是说代理所配置的跨域就已经失效了。问题直接上图：

解决问题

首先，需要在服务器下载nginx并配置nginx.conf文件(位置在nginx中的conf文件夹)，以及将打包好的dist文件夹放在nginx中的html文件夹内。下图是我的nginx.conf文件的配置

 到这里，依旧是还没解决最前面所说的跨域问题，还剩下最后一步

参考了下面这个博主的方法就解决了，直接上链接：跨域问题Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin_捕获了一个异常的小机灵鬼的博客-CSDN博客

 最后解决问题是让后端同事设置了header(按照上述文章设置了header)

小七写Bug
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
完美解决axios跨域请求出错的问题
01-19
错误信息： Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:9000’ is therefore not allowed access. The response had HTTP status code 403 随着前端框架的发展，如今前后端数据分离已经成了趋势，也就是说，前端只需要用ajax请求后端的数据合
vue跨域问题Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Ori
忘川的博客
12-23 1万+
每天一个报错，个各不相同。 看见下面的这行报错是不是感觉跟熟悉？ 没错，vue的跨域问题，记录一下我的解决方法并分享给大家 ~ . ~ Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 那就直接上代码？ module.exports = { devServer: {
Response to preflight request doesn‘t pass access control check: It does not have HTTP ok status.
最新发布
qq_73642679的博客
05-03 1623
当你的拦截器拦截到这种OPTIONS请求时，如果没有正确地处理（例如，返回正确的CORS头部信息），那么浏览器就会认为服务器是不可连接到的所以阻止实际的请求发送，从而导致你看到的错误Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.要在拦截器中检查请求的HTTP方法，如果是OPTIONS方法，那么就直接返回一个包含正确CORS头部信息的响应。实在找不到什么错误了。
跨域问题Response to preflight request doesn‘t pass access control check No ‘Access-Control-Allow-Origin
weixin_44867717的博客
07-05 1万+
跨域问题Response to preflight request doesn’t pass access control check: No 'Access-Control-Allow-Origin 现象 释义 这个问题，属于跨域没有跨过去。 问题原因1：后端没有设置header 解决办法：后端action（controller）里添加如下代码即可 response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader(
跨域问题Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin
热门推荐
winnieFighting
02-28 15万+
我遇到了很多次这个问题，不过都是属于跨域没有跨过去。可能是来自于前端 ，也可能是来自于后端，详情请看下文。
Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘ he
weixin_46005650的博客
12-21 4661
出现 Access to XMLHttpRequest at 'http://localhost:8201/admin/hosp/hospitalSet/3/0' from origin 'http://localhost:9528' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' heade
Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘ 处理
weixin_39802680的博客
03-12 3530
出现这类问题一般有三个地方需要查看 1 后端有没有进行跨域处理 处理了 2 访问的路径有没有写对 若文件路径正确，进入步骤三 3此时说明有可能服务器端有问题， 查看控制台。 有时候显示get请求不被允许， 使用post请求 @PostMapping(“getOrderByNum/{orderNo}”) 4 若使用了nginx来使用请求重定向，对nginx 配置进行查看。 ...
Nginx配置跨域请求Access-Control-Allow-Origin * 详解
09-09
Nginx配置跨域请求Access-Control-Allow-Origin * 是解决现代Web应用中常见问题的一个关键步骤。在Web开发中，由于浏览器的同源策略限制，不同源的网站之间不能直接进行AJAX请求，除非服务器允许这样的跨域行为。...
Access-Control-Allow-Origin跨域问题的终极解决，给自己做备份
10-16
在Web开发中，跨域（Cross-Origin）是一个常见的问题，...正确设置Access-Control-Allow-Origin头，可以有效解决跨域问题，同时兼顾安全性和灵活性。在实际应用中，需要根据项目需求和安全性要求进行适当选择和配置。
Allow_CORS__Access-Control-Allow-Origin_0_1_1_0.zip
03-26
标题 "Allow_CORS__Access-Control-Allow-Origin_0_1_1_0.zip" 提到的是一个与跨域资源共享（CORS）相关的压缩包文件。在Web开发中，跨域问题是一个常见的挑战，尤其是在使用Ajax进行异步数据请求时。描述中的 ...
allow-cors-access-control插件.zip
10-11
标题 "allow-cors-access-control插件.zip" 指向的是一款用于解决跨域问题的Google浏览器插件。跨域资源共享（CORS）是Web开发中的一个重要概念，它允许浏览器在执行JavaScript时请求原本禁止的来自不同源的资源。这...
跨域问题Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin
花开富贵的博客
02-22 6万+
文章目录1.bug详情：2.解决方案【前后端解决方案】：2.1.前端方案：2.1.1. 设置Access-Control-Allow-Origin2.1.2. 设置proxyTable2.2.后端方案：2.2.1. 在controller对应的方法里添加“Access-Control-Allow-Origin”标头”2.2.2. @CrossOrigin注解解决跨域3.结语： 1.bug详情： v...
SpringBoot跨域问题解决
每天学习一点点
01-20 4069
根据资料显示，这个是因为浏览器预检请求失败，复杂请求会做预检请求，比如header中有自动以的属性等情况，当前的报错是指OPTION 请求失败，需要后端放行 OPTION 请求。经过一番百度之后，需要在控制器上添加处理跨域的注解，前端访问后台接口时，浏览器报错，跨域无法访问。然后将拦截器注册到全局拦截器中，使其生效。再次访问接口，请求正常返回了。
Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘
chuyuluo189的博客
01-01 2731
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'
johnhuster的专栏
12-14 10万+
在使用ajax向tomcat部署的rest服务（使用nginx作为反向代理服务器）请求数据时返回了Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource这个异常，错误码是5...
跨域报错：Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origi
仰望星空
12-21 2万+
在编写一个简单POST跨域请求时碰到了这个问题，我看了下网上的答案，感觉我好像也都做到了，但是就是不行，我将核心问题进行了抽象，抽象为下面的代码： 前端是这样的： $.ajax({ type: "post", url: "http://localhost:8081/test/testUploadPhoto", dataType: "json", data:{ canvasPhotoBase64Data:"dataUrl", }, beforeSend:
【错误记录/html】Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow
o0o
08-13 8659
错误详情 在使用ajax向http服务器请求时，出现以下错误：Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 请求如下：$.ajax({ url: "http://127.0.0.1/getname", type: 'GET', succes
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin
07-29
这个错误通常是由于跨域请求引起的。浏览器会在发送跨域请求之前发送一个预检请求（preflight request），以验证服务器是否允许该请求。如果服务器未正确配置响应头部，就会导致这个错误。 要解决这个问题，你需要在服务器端设置正确的响应头部。在返回的响应中包含一个名为"Access-Control-Allow-Origin"的头部，并将其值设置为允许访问的域名，或者设置为"*"表示允许任意域名进行访问。 例如，如果你希望允许所有域名进行访问，可以在服务器端的响应中添加以下头部： ``` Access-Control-Allow-Origin: * ``` 如果你只想允许特定的域名进行访问，可以将其值设置为该域名，例如： ``` Access-Control-Allow-Origin: https://example.com ``` 确保在服务器端正确配置了这些响应头部后，浏览器就会通过预检请求，并允许跨域请求的发送。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值