跨域问题Access to XMLHttpRequest‘*‘from origin ‘*‘ has been blocked by CORS..Access-Control-Allow-Origin

news/2024/7/10 3:02:22 标签: web, ajax, http, vue, java
http://www.w3.org/2000/svg" style="display: none;"> webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

跨域问题Access to XMLHttpRequest’'from origin '’ has been blocked by CORS…Access-Control-Allow-Origin

跨域问题解决方案:CORS
Access to XMLHttpRequest at ‘’ from origin '’ 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.

从源’本地路径’访问 '目标路径(请求链接)'文本传输请求已被CORS策略阻塞:对预置请求的响应未通过访问控制检查:请求的资源上不存在’Access- control - allow - origin '报头。

错误原因:

本地路径和目标路径不是同一个域名下引起的跨域问题,并且,就算两个域名是同一个一级域名不同二级域名的时候,例如 a.baidu.com 和 b.baidu.com 是属于不同域的,也是会出现这个问题

介绍

出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。 例如,XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源,除非响应报文包含了正确CORS响应头。

(注:这段描述不准确,并不一定是浏览器限制了发起跨站请求,也可能是跨站请求可以正常发起,但是返回结果被浏览器拦截了。)

CORS(跨源资源共享)是一个系统,由传输HTTP标头组成,用于确定浏览器是否阻止前端JavaScript代码访问跨源请求的响应

该同源安全政策禁止以资源跨域访问。但CORS使Web服务器能够表示他们希望选择允许跨资源访问其资源。

跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。

比如,站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表,图像和脚本等资源。
https://img-blog.csdnimg.cn/20200728193019500.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tqc3NqajEy,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述" />

跨域资源共享( CORS )机制允许 Web 应用服务器进行跨域访问控制,从而使跨域数据传输得以安全进行。现代浏览器支持在 API 容器中(例如 XMLHttpRequest 或 Fetch )使用 CORS,以降低跨域 HTTP 请求所带来的风险。

解决方案:

1、如果跨域请求发生在相同一级域名不同二级域名之间

例如:a.baidu.com 和 b.baidu.com

跨域直接在邀请求的接口页面中强制设置域为一级域 document.domain = “baidu.com”;

2、设置接口允许ajax跨域访问

在服务器aspx页面头文件里加:

<meta http-equiv="Access-Control-Allow-Origin" content="*" />web.config文件中的 system.webServer 节点下 增加如下配置

<system.webServer>  
    <httpProtocol> 
        <customHeaders> 
            <add name="Access-Control-Allow-Methods" value="OPTIONS,POST,GET"/> 
            <add name="Access-Control-Allow-Headers" value="x-requested-with"/> 
            <add name="Access-Control-Allow-Origin" value="*" /> 
        </customHeaders> 
    </httpProtocol> 
</system.webServer>

网上说的解决方案都是Internet Explorer 8 、9使用 XDomainRequest 对象实现CORS。是不是有这么复杂?于是博主各种百度寻找解决方案。最后发现在调用处指定 jQuery.support.cors = true; 这一句就能解决IE8、9的问题了

这句话的意思就是指定浏览器支持跨域。IE9以上版本的浏览器、谷歌、火狐等都默认支持跨域,而IE8、9却默认不支持跨域,需要我们指定一下。

//例如

jQuery.support.cors = true;
var ApiUrl = "http://b.baidu.com";
$(function () {
    $.ajax({
        type: "get",
        url: ApiUrl + "api/Charging/GetAllChargingData",
        data: {},
        success: function (data, status) {
            if (status == "success") {
                alert("ok");
            }
        },
        error: function (e) {
            alert("error");
        },
        complete: function () {
 
        }
    });
});

注:我这里设置的*是任意的请求都可以访问,如果需要限制替换成自己的访问地址就可以了。

参考资料:

HTTP访问控制(CORS) https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

CORS(跨源资源共享) https://developer.mozilla.org/en-US/docs/Glossary/CORS


http://www.niftyadmin.cn/n/1162301.html

相关文章

SpringCloud 服务消费者Ribbon

个人学习SpringCloud系列 Ribbon篇 Github Link: https://github.com/panjianlong13/SpringBoot-SpringCloud/tree/master/spring-cloud-ribbon Ribbon介绍 Spring Cloud Ribbon是一个基于HTTP和TCP的客户端负载均衡工具&#xff0c;它基于Netflix Ribbon实现。主要功能是提供…

什么是回流,什么是重绘,有什么区别?

什么是回流&#xff0c;什么是重绘&#xff0c;有什么区别&#xff1f; html 加载时发生了什么 在页面加载时&#xff0c;浏览器把获取到的HTML代码解析成1个DOM树&#xff0c;DOM树里包含了所有HTML标签&#xff0c;包括display:none隐藏&#xff0c;还有用JS动态添加的元素…

SpringCloud 服务消费者Feign

个人学习SpringCloud系列 Feign篇 Github Link: https://github.com/panjianlong13/SpringBoot-SpringCloud/tree/master/spring-cloud-feign Feign介绍 Feign是一种声明式、模板化的HTTP客户端&#xff0c;可以帮助我们更快捷、优雅地调用HTTP API。Feign的功能类似dubbo暴露…

【探索】NodeJS中间层搭建——楔子

前言 最近碰了个壁&#xff0c;公司开发的一个新项目里我大胆地提出要前后端完全分离&#xff0c;用JavaScript模板引擎、ajax、路由等技术替代繁琐的前后端混合的业务逻辑&#xff0c;项目进行到一半前辈提出来仅仅靠前端的力量无法满足公司对SEO的要求。是放弃之前的工作重新…

SpringCloud 熔断器Hystrix

个人学习SpringCloud系列 Hystrix篇 Github Link: https://github.com/panjianlong13/SpringBoot-SpringCloud/tree/master/spring-cloud-hystrix Hystrix介绍 Hystrix是什么 hystrix对应的中文名字是“豪猪”&#xff0c;豪猪周身长满了刺&#xff0c;能保护自己不受天敌的…

docker client must be run with elevated privileges to connect

docker client must be run with elevated privileges to connect 必须以提升的权限运行客户端才能连接 windows运行docker的时候提示权限不足&#xff0c; 首先看下自己是不是用管理身份打开的powershell &#xff08;在运行那里搜索powershell 然后有管理身份运行&#xff0…

SpringCloud 熔断监控Hystrix Dashboard Turbine

个人学习SpringCloud系列 熔断监控篇 Github Link: https://github.com/panjianlong13/SpringBoot-SpringCloud/tree/master/spring-cloud-hystrix-monitor 在微服务架构中&#xff0c;根据业务来拆分成一个个的服务&#xff0c;服务与服务之间可以相互调用。由于网络原因或者…

React 设置className数组,多个类名

在一个元素上设置样式&#xff0c;有一个固定的样式&#xff0c;然后还有一个使用三元运算符根据条件添加的样式。 比如说有一个固定样式"title": <div className"title">标题</div>&#xff0c;然后还要一个点击高亮的样式: <div class…