Access-Control-Allow-Origin 跨域资源请求报错解决方案

最新推荐文章于 2024-05-10 21:47:27 发布
最新推荐文章于 2024-05-10 21:47:27 发布
阅读量3.4k 收藏 1
点赞数 1
分类专栏： web 前端 文章标签： 前端 vue.js javascript web app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/resdust/article/details/120940361
版权
本文介绍了在uni-app前端开发中遇到的CORS跨域问题及其解决方法。通过理解CORS的工作原理，提出了设置代理服务器来规避浏览器的CORS策略。详细讲述了在vue.config.js中配置devServer代理及注意事项，包括如何处理manifest.json覆盖问题。
摘要由CSDN通过智能技术生成

做uni-app前端开发时，遇到CORS策略问题：

: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 is present on the requested resource.

官网给的解决方案在这里：
https://juejin.cn/post/6844904063855755271#heading-8
但是这个帖子讲的不是很明白，至少刚入前端的我没看懂。。然后发现vue教程中反而解释的非常清楚。由于uni-app也是通过vue-cli创建，因此可以使用同样的解决方案，只需要增加一个文件并修改一行请求代码。可以直接跳到末尾看解决方法

问题原因

CORS即Cross-origin resource sharing，跨域资源共享，这个技术是为了解决AJAX的同源策略影响（需要域名（或IP），协议，端口都相同）。详细介绍参考阮一峰-跨域资源共享 CORS 详解。
简单来说，对于跨域请求和除了GET、HEAD外的同源请求，现代浏览器会自动在请求头中加入一个Origin字段。Origin字段包含本次请求的协议+域名+端口，如

GET /cors HTTP/1.1
Origin: http://
最低0.47元/天 解锁文章
resdust
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
出现 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the 解决方法
码农研究僧的博客
06-03 2001
Access to XMLHttpRequest at 'http://127.0.0.1:5000/api/data' from origin 'http://10.197.0.79:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
axios跨域问题 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
qq_40240053的博客
09-23 1849
axios跨域问题 问题描述： 在使用vue+axios开发进行post请求，然后出现以下图片中的跨域问题； 解决方法： 在网上看了一些相关资料，最后找到了解决方法 module.exports = { dev: { //... proxyTable: { '/api': { port: 3000, target: 'http://127.0.0.1:8081/', chunkOrigins: true
正确解决No ‘Access-Control-Allow-Origin’ header is present on the requested resource异常的有效解决方法
wbajsjhhhhh的博客
05-03 7349
正确解决No ‘Access-Control-Allow-Origin’ header is present on the requested resource异常的有效解决方法
'Access-Control-Allow-Origin' 报错
AKIM一枚
04-29 1722
问题 浏览器控制台出现以下报错 Failed to load xxxxxxxxxxxxxx : The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. O...
解决 js ajax跨域访问报“No 'Access-Control-Allow-Origin' header is present on the requested resource.”错误
热门推荐
idomyway的博客
03-15 5万+
在实现不同端口号之间访问时遇到了跨域报错问题前言从 http://www.a.com/test.html 发起一个跨域请求， 请求的地址为： http://www.b.com/test.PH在本地用ajax跨域访问请求时报错：XMLHttpRequest cannot loadhttp://www.zjblogs.com/. No 'Access-Control-Allow-Origin' he
js请求跨域问题--Access-Control-Allow-Origin
weixin_34326558的博客
01-18 285
在前台调试的时候出现XMLHttpRequestcannotloadhttp://www.xx.com/Action/Index.php?Action=11.No'Access-Control-Allow-Origin'headerispresentontherequestedresource.Origin'http://blog.xx.com'...
uniapp解决跨域问题--Access-Control-Allow-Origin
动哒APP—运动健康科技提供商
10-13 7982
本文由通密全栈公众号（tongmi5g），QQ群（58621899）提供，欢迎关注获取技术支持，有任何问题群里都会回复。 关于跨域这个问题，作为前端，总是难免遇到，总是要i到各个后台请求接口，各个后台域名又不一样，所以，就有了跨域的问题。 跨域两种解决方法： 1. 前端解决 在uniapp中，前端解决最容易理解的文章就是这个了： https://blog.csdn.net/sayyy/article/details/106269732 这个写的很好，可以参考下。 2.后端解决 有的时候，前端做处理，其实很累
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. http2.0跨域问题解决
真的是乌鱼
04-14 824
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 前端三大经典问题之一 跨域 一般通过设置允许请求头，请求方法，允许域即可解决 但是 http2.0 协议请求时 只是设置这些则无效 在进行options请求时需要设置进行返回对应的请求协议，如下 $_SERVER[‘SERVER_PROTOCOL’] 来获取对应的协议返回就可以通过跨域请求，这个是php语言获取的，其他后端语言使用相同的值进行获取
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 框架中解决跨域问题的方法。跨域是指不同域名之间相互访问，浏览器不能执行其他网站的脚本，这是由浏览器的同源策略所造成的安全限制策略。...
Allow-Control-Allow-Origin插件
11-08
JavaScript跨域访问，ionic2使用正常。欢迎大家下载，本来想免费的，但必须选择资源分，我也没办法。
谷歌跨域插件Access-Control-Allow-Origin
02-15
标题中的“谷歌跨域插件Access-Control-Allow-Origin”指的是在谷歌浏览器上使用的扩展程序，用于解决Web开发过程中遇到的跨域问题。跨域是由于浏览器的同源策略（Same-origin policy）引起的，它限制了来自不同源的...
Ajax 设置Access-Control-Allow-Origin实现跨域访问
10-20
主要介绍了Ajax 设置Access-Control-Allow-Origin实现跨域访问,非常不错，具有参考借鉴价值，需要的朋友可以参考下
跨域请求常见错误及解决：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
二饭的博客
12-14 1万+
我的项目是Vue+Boot前后端分离项目。出现标题的错误信息的可能如下： 第①种情况 后端没有设置跨域，这里以Boot项目为例，在类上使用如下注解：表示这个类中的方法都可以进行跨域 @RestController @RequestMapping("client/recruit") @CrossOrigin public class RecruitClient { } 第②种情况 后端拦截器或过滤器中没有允许该请求方法通过，正确写法如下：拦截器示例 response.setHeader("Access-
No ‘Access-Control-Allow-Origin’ header is present on the requested resource异常的解决方案
最新发布
2301_79779756的博客
05-10 1948
当浏览器尝试从不同于其源（域、协议或端口）的服务器加载资源时，会触发同源策略（Same-Origin Policy）。然而，有时我们确实需要从不同的源加载资源，这时就需要使用跨源资源共享（CORS，Cross-Origin Resource Sharing）机制。
uniapp请求报错blockedbyCORSpolicy: No ‘Access-Control-Allow-Origin‘ header is present on the requested
tqq6629的博客
06-13 2776
uniapp初搭建遇到的请求跨域的问题
处理 No 'Access-Control-Allow-Origin' header is present on the requested resource 问题
没有眉毛的阿斗叶
08-01 8559
自己搭建Spring Boot+Vue前后端分离，全端Vue前端跨域到后端，发现数据没有拿到，然后debug后台发现方法进入debug,和持久层（dao）交互成功，但是就是没有数据获取，这里原因是跨域导致的。 ## 解决方法就是：在你要写的方法面前加上注解： @CrossOrigin 后端项目有时候找不到sqlSessionFactory，原因可能不能debug启动，直接启动。就不会发生这个错误。...
uni-app 跨域
weixin_51715424的博客
03-02 6809
uni-app 跨域
为什么添加Access-Control-Allow-Origin处理跨域请求
09-14
添加 Access-Control-Allow-Origin 头部是为了处理跨域请求。跨域请求是指在浏览器中，从一个源（域名、协议、端口）发送请求到另一个源。浏览器遵循同源策略，即只允许在同一源上执行的页面访问相同源的资源。 当前端代码从一个域名发送请求到另一个域名时，如果服务器没有设置 Access-Control-Allow-Origin 头部，浏览器会拦截该请求，并报告一个跨域请求错误。通过在服务器端设置 Access-Control-Allow-Origin 头部，我们可以明确指定允许访问资源的来源，从而解决跨域请求的问题。 Access-Control-Allow-Origin 头部有两种常见的取值： 1. 单个域名：指定允许访问资源的来源域名。例如，设置为`Access-Control-Allow-Origin: https://example.com`表示只允许来自 https://example.com 的请求访问资源。 2. 通配符：指定允许所有域名访问资源。例如，设置为`Access-Control-Allow-Origin: *`表示允许任何域名的请求访问资源。 需要注意的是，跨域请求的安全性需要开发者自行确保，设置 Access-Control-Allow-Origin 只是解决跨域请求的一部分。其他安全措施如 CSRF (Cross-Site Request Forgery) 防御机制等也需要考虑。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值