解决Ajax跨域问题：Origin xx is not allowed by Access-Control-Allow-Origin.

最新推荐文章于 2023-07-26 09:41:44 发布
最新推荐文章于 2023-07-26 09:41:44 发布
阅读量1.6w 收藏 2
点赞数 1
分类专栏： AJAX/jQuery/Javascript PHP HTML HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/china_skag/article/details/42493399
版权
PHP 同时被 3 个专栏收录
169 篇文章 0 订阅
订阅专栏
HTML
111 篇文章 0 订阅
订阅专栏
AJAX/jQuery/Javascript
41 篇文章 0 订阅
订阅专栏
今天一个Ajax跨域问题，代码如下： 
<html>
<head>
    <title>title</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
        $.ajax({
            url:"http://map.yanue.net/gpsApi.php?lat=22.502412986242&lng=113.93832783228",
            type:'GET',
            success: function(data){
                $('body').append( "Name: " + data );
            }
        });
    </script>
</head>
<body>
    测试Ajax跨域问题
</body>
</html>

没有结果，chrome用F12 下查看错误 得知： XMLHttpRequest cannot load http://map.yanue.net/gpsApi.php?lat=22.502412986242&lng=113.93832783228. Origin http://localhost is not allowed by Access-Control-Allow-Origin. AJAX跨域问题产生。

什么引起了ajax不能跨域请求的问题？

ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以会警告。


解决方案如下：
一、使用jsonp格式， 如jquery中ajax请求参数   dataType:'JSONP' 
<html>
<head>
    <title>title</title>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
        $.ajax({
            url:"http://map.yanue.net/gpsApi.php?lat=22.502412986242&lng=113.93832783228",
            type:'GET',
            dataType:'JSONP',
            success: function(data){
                $('body').append( "Name: " + data );
            }
        });
    </script>
</head>
<body>
测试Ajax跨域问题
</body>
</html>


二、server端加上header设为 Access-Control-Allow-Origin：* 
header("Access-Control-Allow-Origin: *"); # 跨域处理

问题就解决了。




china_skag
关注
专栏目录
Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin
Top5软件工程硕士，先后在京东、字节从事多年Java后端开发、实时和离线大数据开发
09-26 4121
安装插件： Allow-Control-Allow-Origin: * fetch的请求中就不必带mode：“no-cors”这句话了   参考： https://stackoverflow.com/questions/35588699/response-to-preflight-request-doesnt-pass-access-control-check    ...
iOS WKWebView Origin null is not allowed by Access-Control-Allow-Origin
豪冷的博客
05-17 1431
iOS WKWebView Origin null is not allowed by Access-Control-Allow-Origin
Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.
andaok726325的博客
07-08 2469
用谷歌浏览器打开我的ajax小程序，发现错误：Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin. 根据网上说是跨域问题，我想可能是因为我在浏览器上打的地址是localhost，在ajax请求中用的地址是127.0.0.1,所以我将浏览器上的地址改为127.0.0.1，就没有错误了。 或...
ajax中origin,解决Ajax跨域问题：Origin xx is not allowed by Access-Control-Allow-Origin.
weixin_36087357的博客
08-05 1348
今天一个Ajax跨域问题，纠结我半天，记录之。title$.ajax({url:"http://map.yanue.net/gpsApi.php?lat=22.502412986242&lng=113.93832783228",type:'GET',success: function(data){$('body').append( "Name: " + data );}});测试Ajax跨...
url中增加端口号之后提示Origin is not allowed by Access-Control-Allow-Origin. Angular JS
小鹰信息技术服务部
08-08 9468
OPTIONS http://58.215.219.74/fsjd_service/api/users Origin http://58.215.219.74:8071 is not allowed by Access-Control-Allow-Origin. angular.js:10419 XMLHttpRequest cannot load http://58.
使用chrome调试ajax加载本地文件的时候出现Failed to load resource: Origin null is not allowed by Access-Control-Allow
长腿叔叔的专栏
05-28 5147
使用chrome调试ajax加载本地文件的时候出现Failed to load resource: Origin null is not allowed by Access-Control-Allow 原来是chorme不支持本地的ajax的调用，使用ie或者ff就不会出现问题了，或者将html的demo部署在服务器上就ok了
已解决：No 'Access-Control-Allow-Origin'跨域问题
08-19
总的来说，解决"No 'Access-Control-Allow-Origin'"跨域问题的关键在于理解浏览器的同源策略，并在后端服务器中正确配置CORS策略。在实际开发中，应当兼顾安全性和便利性，根据项目需求来设定合适的跨域策略。
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头，可以有效解决跨域问题，同时兼顾安全性和灵活性。在实际应用中，需要根据项目需求和安全性要求进行适当选择和配置。
Nginx反向代理proxy_cache_path directive is not allowed错误解决方法
01-10
尝试使用Nginx进行反向代理过程中出现如下错误： 代码如下: nginx: [emerg] “proxy_cache_path” directive is not allowed here in /etc/nginx/conf.d/default.conf:29 提示意思“proxy_cache_path指令不被允许”，在官网上查找了相关说明，也没有发现问题，最后看应用范围才知道，他只能使用于http{  }部分，把proxy_cache_path放置于http部分即可解决此问题 参见：http://nginx.org/cn/docs/http/ngx_http_proxy_module.
静态文件访问不到报No Access-Control-Allow-Origin处理办法
06-11
当一个网页尝试从不同的源（协议、域名或端口）请求资源时，如果目标服务器没有允许这个源的权限，浏览器会阻止该请求，从而出现"No 'Access-Control-Allow-Origin' header is present on the requested resource"的...
Nginx异常：[emerg] “proxy_timeout“ directive is not allowed here in /etc/nginx/nginx.conf
weixin_43860634的博客
07-26 4778
Nginx异常
proxyTable解决浏览器的跨域访问
子冉冰清的博客
02-27 1384
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:11000’ is therefore not allowed access 原因：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同。 解决：采用proxyTable解决 p...
Proxy account failing to run SSIS Error (Proxy (11) is not allowed for subsystem "SSIS" and user "AB...
weixin_34247155的博客
07-21 364
USE [msdb]EXEC msdb.dbo.sp_grant_login_to_proxy @proxy_name=N'SSISProxyAgentV1', @login_name=N'WTC\Ebw.Admin'GO 转载于:https://www.cnblogs.com/hqbird/p/3859200.html
Origin 'http://localhost:8080' is therefore not allowed access
hk_life的博客
08-10 1万+
Failed to load https://qdyhdfw.beway.cn/api/start?cifNo=: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.比...
解决Ajax跨域问题：Origin xx is not allowed by Access-Control-Allow-Origin
博茨瓦纳的狮王
09-01 1万+
今天一个Ajax跨域问题，纠结我半天，记录之。      title     src="http://code.jquery.com/jquery-1.7.1.min.js">             $.ajax({             url:"http://map.yanue.net/gpsApi.php?lat=22.502412986242&lng=113.93832783
Origin XX is not allowed by Access-Control-Allow-Origin.解决办法
热门推荐
不啦草的草原
06-04 3万+
Origin XX is not allowed by Access-Control-Allow-Origin.  其实就是  js 跨域访问问题 什么引起了ajax不能跨域请求的问题？ ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以会警告。   解决方法   红色是重点的地方。
Origin null is not allowed by Access-Control-Allow-Origin. Status code: 200
最新发布
03-03
"Origin null is not allowed by Access-Control-Allow-Origin. Status code: 200" 是一个常见的跨域请求错误。它表示在进行跨域请求时，服务器没有设置允许访问的来源（Origin）。 当浏览器发起一个跨域请求时，服务器需要在响应头中设置 Access-Control-Allow-Origin 字段来指定允许访问的来源。如果服务器没有设置该字段，或者设置的值不包括当前请求的来源，浏览器就会报错并拒绝响应。 解决这个问题的方法有两种： 1. 在服务器端设置响应头：在服务器端的响应中添加 Access-Control-Allow-Origin 字段，并设置为允许访问的来源。例如，可以设置为 "*" 表示允许任何来源访问，或者设置为具体的域名。 2. 使用代理服务器：通过在自己的服务器上设置代理，将跨域请求转发到目标服务器，然后将响应返回给浏览器。这样就避免了浏览器的同源策略限制。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值