CORS 远程请求

最新推荐文章于 2024-01-11 14:53:18 发布

莫冲

最新推荐文章于 2024-01-11 14:53:18 发布

阅读量322

点赞数

CC 4.0 BY-SA版权

分类专栏： apache html5

本文链接：https://blog.youkuaiyun.com/mochong/article/details/67636431

html5 同时被 3 个专栏收录

40 篇文章

订阅专栏

apache

12 篇文章

订阅专栏

cors

1 篇文章

订阅专栏

本文介绍了一种使用CORS实现跨域请求的方法，并提供了前端请求的示例代码及服务器端配置指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不同域的远程访问之前是用jsonp，但是只能支持get请求，而且写法也很恶心。现在HTML5都来了，应该优先用CORS
前端请求代码


function createCORSRequest(method, url) {
					var xhr = new XMLHttpRequest();
					if ("withCredentials" in xhr) {
						// 此时即支持CORS的情况
						// 检查XMLHttpRequest对象是否有“withCredentials”属性
						// “withCredentials”仅存在于XMLHTTPRequest2对象里
						xhr.withCredentials = true;
						xhr.open(method, url, true);
					//	xhr.setRequestHeader('Content-Type', 'application/json');
						//xhr.onreadystatechange = handler;
					} else if ( typeof XDomainRequest != "undefined") {
						console.log("ie support");
						// 否则检查是否支持XDomainRequest，IE8和IE9支持
						// XDomainRequest仅存在于IE中，是IE用于支持CORS请求的方式
						xhr = new XDomainRequest();
						xhr.open(method, url);

					} else {
						// 否则，浏览器不支持CORS
						xhr = null;
					}
					return xhr;
				}

				var request_url = "http://xxx?apiVersion=2&appID=64&filter=NM&pageSize=&page=&scale=2";
				var xhr = createCORSRequest('GET', request_url);
				if (!xhr) {
					throw new Error('CORS not supported');
				}
				xhr.send();

服务器端配置。首先apache要安装headers模块。
执行 a2enmod header
然后重启apache 检查是否安装，要进入phpinfo查看 load modules中有无mod_headers

然后在网站的htaccess中添加以下配置


<IfModule mod_headers.c>
	Header set Access-Control-Allow-Origin "http://xxxx"
	Header set Access-Control-Allow-Credentials true
</IfModule>

请注意，如果server中返回结果又做了header跳转，这种跳转请求是不被CORS允许的。会报错。