美文网首页
ajax跨域

ajax跨域

作者: 唯_伊 | 来源:发表于2019-05-10 09:27 被阅读0次

解决 js ajax跨域访问报“No 'Access-Control-Allow-Origin' header is present on the requested resource.”错误

在实现不同端口号之间访问时遇到了跨域报错问题

前言

http://www.a.com/test.html 发起一个跨域请求,
请求的地址为: http://www.b.com/test.PH
在本地用ajax跨域访问请求时报错:
1.XMLHttpRequest cannot loadhttp://www.zjblogs.com/. No 'Access-Control-Allow-Origin'
2.header is present on the requested resource. Origin 'null' is therefore not allowed access.

问题原因

W3C标准里是这么实现HTTP跨域请求的, Cross-Origin Resource Sharing
简单的来说,就是跨域的目标服务器要返回一系列的Headers,通过这些Headers来控制是否同意跨域。

Access-Control-Allow-Origin HTTP Response Header

Access-Control-Max-Age HTTP Response Header

Access-Control-Allow-Credentials HTTP Response Header

Access-Control-Allow-Methods HTTP Response Header

Access-Control-Allow-Headers HTTP Response Header

Origin HTTP Request Header

Access-Control-Request-Method HTTP Request Header

Access-Control-Request-Headers HTTP Request Header

在 Request 包和 Response 包中都有一些。
其中最敏感的就是 Access-Control-Allow-Origin 这个 Header, 他是W3C标准里用来检查该跨域请求是否可以被通过。 (Access Control Check)

解决方法

1、在java服务器端的filter或者servlet里面添加

response.setHeader("Access-Control-Allow-Origin", "*");

2、如果请求的url是aspx页面,则需要在aspx页面中添加代码

Response.AddHeader("Access-Control-Allow-Origin", "*");

3、如果请求的url是PHP页面

header("Access-Control-Allow-Origin: *");

4、如果请求的url是静态的html页面,则需要在页面中添加meta标签代码:

<meta http-equiv="Access-Control-Allow-Origin" content="*" />

“Access-Control-Allow-Origin”表示允许跨域访问,“*”表示允许所有来源进行跨域访问,这里也可以替换为特定的域名或ip。

很显然,这种方式对非网站拥有人员来说是不能做到的。而且此种方式很容易受到CSRF攻击。
如果还不行,就把这些都加上吧

// 指定允许其他域名访问   
header('Access-Control-Allow-Origin:*');   
// 响应类型   
header('Access-Control-Allow-Methods:POST');   
// 响应头设置   
header('Access-Control-Allow-Headers:x-requested-with,content-type'); 

参考:https://blog.csdn.net/idomyway/article/details/79572973

相关文章

  • 解决ajax跨域问题

    Jsonp解决ajax跨域问题 CORS解决ajax跨域问题

  • 前端跨域

    什么是ajax跨域 ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参...

  • 跨域

    跨域:ajax 不能跨域img css script 标签 可以跨域例如:《img src="images/...

  • Http浅析【2】——ajax跨域问题

    视频参考:ajax跨域完全讲解 本文精华版:【综合】ajax跨域问题 什么是跨域问题 简单来讲,当前台调用后台,如...

  • 交互那些事(二)

    说完ajax我想必须说说jsonp了,谈到jsonp就必须先说说跨域,首先ajax是不能跨域的,除非后台允许跨域或...

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • 珠峰 AJAX --- JSONP跨域

    珠峰 AJAX --- JSONP跨域AJAX(异步 javascript and XMLHTTPReq...

  • ajax

    ajax 跨域 跨域:http 协议 域名 端口 三者只要有一个不同,就是跨域 服务端解决跨域: res.setH...

  • AJAX跨域完全讲解

    AJAX跨域完全讲解 今天在慕课网上学习了AJAX跨域完全讲解:https://www.imooc.com/lea...

  • AJAX

    题目 手写一个ajax 跨域的常用实现方式 知识点 XMLHttpRequest 状态码 跨域:同源策略,跨域解决...

网友评论

      本文标题:ajax跨域

      本文链接:https://www.haomeiwen.com/subject/makooqtx.html