【跨域问题】Access-Control-Allow-Origin 轻松解决

最新推荐文章于 2024-06-02 22:07:35 发布
最新推荐文章于 2024-06-02 22:07:35 发布
阅读量1.9k 收藏
点赞数
分类专栏： 遇到的问题 文章标签： ajax ajax跨域问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mixko/article/details/112183344
版权

今天学习ajax的时候遇到了跨域问题

’‘Access to XMLHttpRequest at ‘http://localhost:3000/framework/create’ from origin ‘http://localhost:4200’ 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.’'



搜了很多地方发现都不能处理,后来在b站的一个视频找到了解决办法

https://www.bilibili.com/video/BV1gt411S78C

首先需要装一个包.

打开编辑器终端.
输入npm i cors , 回车
然后输入app.use(require('cors')());

像这样在这里插入图片描述
如此简单,只需这一行代码就轻松解决跨域问题了

maac
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Access-Control-Allow-Origin 跨域资源请求报错解决方案
resdust的博客
11-01 3434
做uni-app前端开发时，遇到CORS策略问题： ```json :8081/#/pages/index/index:1 Access to XMLHttpRequest at 'http://api-remote.xxxx.com'/version/getCurrentVersion' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header i
Cors跨域请求，配置Access-Control-Allow-Origin："*"，无效解决方案
倒着走的码农
03-17 3万+
由于应用需要跨域请求数据，博主在JDK8、Tomcat7.0的cors可以配置Access-Control-Allow-Origin："*"，但是我按照文档配置以后却没有生效，一度怀疑是tomcat或者jdk的问题，最后想起来web.xml是按照从前往后的顺序加载的。解决方案：是filter位置的问题，你把整个放到第一个filter的位置就可以了。给出web.xml: <web-app
正确解决No ‘Access-Control-Allow-Origin’ header is present on the requested resource异常的有效解决方法
wbajsjhhhhh的博客
05-03 7166
正确解决No ‘Access-Control-Allow-Origin’ header is present on the requested resource异常的有效解决方法
若依打包上线前后端配置
金错刀的博客
07-27 1699
若依前后端打包上线服务器nginx配置
The value of the ‘Access-Control-Allow-Origin‘ header in the response 关于后端配置允许跨域后前端请求依然失败得不到响应的问题
最新发布
2301_79108772的博客
06-02 835
作者在进行联系session分布式登录的时候，遇到了一个问题，就是明明我的后端进行配置了允许跨域，但是前端依然请求失败，无法收到请求，并报出如下错误。
若依springboot 项目 做跨域设置
qq_41901629的博客
08-30 947
/需要放行header头部字段 如需鉴权字段，自行添加，如Authorization等。//解决Access-Control-Allow-Origin跨域问题。//放行所有,类似*,这里的*完全无效。
跨域(Access-Control-Allow-Origin)解决方案详解
猿in
12-09 6万+
文章目录浏览器的同源安全策略跨域报错跨域解决方案CORSResponse支持跨域springboot支持跨域Java中设置多个Access-Control-Allow-Origin跨域访问基于nginx配置请求的CORSJSONP方案后端接口返回js原生实现jsonpjQuery实现jsonpvue.js实现jsonpJSONP的优缺点其它方式支持跨域 浏览器的同源安全策略 同源策略，它是由Net...
正确配置Access-Control-Allow-Origin，千万不要设置成*
baijiafan的博客
08-24 7万+
正确配置Access-Control-Allow-Origin，千万不要设置成*，这样的配置太不安全。
Access-Control-Allow-Origin跨域解决及详细介绍
热门推荐
MicroAnswer的博客
11-05 9万+
解决跨域问题。详细介绍了跨域的相关内容。
解决跨域问题 ex:Access-Control-Allow-Origin,strict-origin-when-cross-origin
Sagittarius_O的博客
03-28 313
ssm,springboot跨域
谷歌跨域插件Access-Control-Allow-Origin
02-15
标题中的“谷歌跨域插件Access-Control-Allow-Origin”指的是在谷歌浏览器上使用的扩展程序，用于解决Web开发过程中遇到的跨域问题。跨域是由于浏览器的同源策略（Same-origin policy）引起的，它限制了来自不同源的...
Nginx配置跨域请求Access-Control-Allow-Origin * 详解
09-09
Nginx配置跨域请求Access-Control-Allow-Origin * 是解决现代Web应用中常见问题的一个关键步骤。在Web开发中，由于浏览器的同源策略限制，不同源的网站之间不能直接进行AJAX请求，除非服务器允许这样的跨域行为。...
Nginx跨域设置Access-Control-Allow-Origin无效的解决办法
01-10
add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET,POST'; 使用以下配置，生效。 if ($request_method = '...
SpringBoot跨域Access-Control-Allow-Origin实现解析
08-25
SpringBoot 跨域 Access-Control-Allow-Origin 实现解析是指在 SpringBoot 框架中解决跨域问题的方法。跨域是指不同域名之间相互访问，浏览器不能执行其他网站的脚本，这是由浏览器的同源策略所造成的安全限制策略。...
【会导致跨域问题的原因】Access to XMLHttpRequest at‘http://localhost:
xzxailh的博客
10-15 8936
如果项目所有的功能都不能用或者是部分模块的的全部功能不能用，大概率是nginx的问题。1. 如果使用nginx，查看nginx配置文件是否配置后端的请求端口路径。2. 查看后端的controller层是否有@CrossOrigin 注解。如果模块中只有一个功能会报跨域问题，大概率是请求方式和路径不一致导致的。3. 查看前端的请求方式与后端是否一致，查看路径是否一致。以上内容都会导致产生跨域问题。
跨域问题('Access-Control-Allow-Origin)如何解决？
懒散的蜗牛
12-23 5425
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:0000' is therefore not allowed access. 原因：浏览器的同源策略不允许跨域访问，所谓同源策略指协议、域名、端口号相同。 解决方式：局部配置、全局配置、采用...
跨域问题解决方案
YXXXYX的博客
07-06 2566
跨域问题一般会在前后端分离的项目中遇到，跨域的产生是因为浏览器为了安全设置的同源策略，只有协议（http/https）、域名（www.test.com）、端口（8080/8081…）三者都相同时才不会产生跨域问题；这也解释了为什么前后端分离的项目会有跨域问题，就比如我们在同一台服务器上开发，前端的url为：http://127.0.0.1:3000，而后端的url为：http://127.0.0.1:8080，两者端口都不同如果相互访问定然会产生跨域问题；如图：前端http://localhost:3000
解决跨域问题：Access to XMLHttpRequest at ‘http://localhost:8080/xxx‘ No ‘Access-Control-Allow-Origin‘ head
一觉睡过头的菜鸡的博客
05-30 7万+
文章目录一、问题二、问题产生的原因三、解决方法1. 问题出现在我们没有带标头，我们就带上标头2. 使用插件扩展 一、问题 当我实现前后端分离的时候，遇到了这个问题： Access to XMLHttpRequest at ‘http://localhost:8080/xxx’ from origin ‘http://localhost:63342’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is pre
怎么设置Access-Control-Allow-Origin解决跨域问题
08-22
要解决跨域问题并设置Access-Control-Allow-Origin头部，你可以按照以下步骤进行操作： 1. 在服务器端，确保你的API或网站支持跨域请求。这可以通过在响应头中设置Access-Control-Allow-Origin来实现。 2. Access-Control-Allow-Origin头部指定了允许访问该资源的源。你可以将其设置为允许的源，也可以使用通配符来允许任何源进行访问。 3. 例如，如果你希望允许所有源进行访问，可以将Access-Control-Allow-Origin设置为"*"。如果你只想允许特定的源进行访问，可以将其设置为该源的域名或IP地址。 4. 在服务器响应中添加Access-Control-Allow-Origin头部。具体的实现方式取决于你使用的服务器端编程语言和框架。 以下是一些常见的服务器端设置示例： - Node.js（使用Express框架）： ``` app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); next(); }); ``` - PHP： ``` header("Access-Control-Allow-Origin: *"); ``` - Java（使用Spring框架）： ``` @CrossOrigin("*") ``` 请注意，将Access-Control-Allow-Origin设置为"*"可能会存在安全风险。因此，在生产环境中，你应该仔细考虑并根据自己的需求限制允许访问的源。 通过设置Access-Control-Allow-Origin头部，你可以解决跨域问题，并允许不同源的客户端访问你的API或网站。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值