【前端】ajax跨域，这应该是最全的解决方案了
|
原文出处：
撒网要见鱼
前言 从刚接触前端开发起， 个人见识有限，如有差错，请多多见谅，欢迎提出issue，另外看到这个标题，请勿喷~ 题纲 关于跨域，有N种类型，本文只专注于
什么是ajax跨域ajax跨域的原理ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参考 浏览器同源政策及其规避方法(阮一峰) CORS请求原理CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。 基本上目前所有的浏览器都实现了CORS标准,其实目前几乎所有的浏览器ajax请求都是基于CORS机制的,只不过可能平时前端开发人员并不关心而已(所以说其实现在CORS解决方案主要是考虑后台该如何实现的问题)。 关于CORS，强烈推荐阅读 另外，这里也整理了一个实现原理图(简化版):
如何判断是否是简单请求?浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。只要同时满足以下两大条件，就属于简单请求。
凡是不同时满足上面两个条件，就属于非简单请求。 ajax跨域的表现说实话，当初整理过一篇文章，然后作为了一个解决方案，但是后来发现仍然有很多人还是不会。无奈只能耗时又耗力的调试。然而就算是我来分析，也只会根据对应的表现来判断是否是跨域，因此这一点是很重要的。 ajax请求时,如果存在跨域现象,并且没有进行解决,会有如下表现:(注意，是ajax请求，请不要说为什么http请求可以，而ajax不行，因为ajax是伴随着跨域的，所以仅仅是http请求ok是不行的) 注意:具体的后端跨域配置请看题纲位置。 第一种现象:
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function
addScriptTag
(
src
)
{
var
script
=
document
.
createElement
(
'script'
)
;
script
.
setAttribute
"type"
,
"text/javascript"
;
.
src
;
body
.
appendChild
;
}
window
onload
(
{
addScriptTag
'http://example.com/ip?callback=foo'
;
}
foo
data
{
console
.
log
'response data: '
+
JSON
.
stringify
;
}
;
|
请求时,接口地址是作为构建出的脚本标签的src的,这样,当脚本标签构建出来时,最终的src是接口返回的内容
|
1
2
3
|
foo
(
{
"test"
:
"testData"
}
)
;
|
- 由于
注意,一般的JSONP接口和普通接口返回数据是有区别的,所以接口如果要做JSONO兼容,需要进行判断是否有对应callback关键字参数,如果有则是JSONP请求,返回JSONP数据,否则返回普通数据
使用注意
基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CORS解决跨域了(所以如今它也基本被淘汰了)
CORS解决跨域问题
CORS的原理上文中已经介绍了，这里主要介绍的是，实际项目中，后端应该如何配置以解决问题(因为大量项目实践都是由后端进行解决的)，这里整理了一些常见的后端解决方案:
PHP后台配置
PHP后台得配置几乎是所有后台中最为简单的,遵循如下步骤即可:
- 第一步:配置Php 后台允许跨域
|
1
2
3
|
<?php
header
(
'Access-Control-Allow-Origin: *'
)
;
header
'Access-Control-Allow-Headers: Origin,X-Requested-With,Content-Type,Accept'
;
//主要为跨域CORS配置的两大基本信息,Origin和headers</code?>
|
- 第二步:配置Apache web服务器跨域(httpd.conf中)
原始代码