跨域问题

1、问题由来

同源策略：不同源（域名、协议、端口）的客户端脚本在没有明确授权的情况下，不能读取对方的资源。

• 请求资源报错：No ‘Access-Control-Allow-Origin’ header

2、跨域的几种方法

1. jsonP

   • 利用script（加载资源是get）可以跨域请求
   • 数据在回调函数中拿到
   • 只支持get

2. form+iframe

   • 这种方式只能提交数据，拿不到返回的数据。
   • form、img标签是不受跨域限制的，可以利用img实现埋点功能

3. cors（适用场景广）

   1. 后端设置请求头
   2. 浏览器安装cors插件——Allow-Control-Allow-Origin: * 1.0.3
   3. 问题：获取不到服务器自定义的响应头

4. 代理（nginx或node）

   1. 开发过程中一般使用webpack或node实现代理
   2. nginx也可以实现，但webpack可能更简单。

5. 关闭浏览器安全模式

6. postMessage

   • h5新接口，没用过，可以用dom通信，感觉和发布—订阅类似

7. document.domain

   • 没用过，适合主域名相同，子域名不同的iframe

3、问题：

1. ajax不能跨域是发送的请求被浏览器拦截，还是回复的响应被浏览器拦截？

   • 答案：响应被拦截

   • 测试环境：Chrome，Flask，原生ajax

   • 测试代码：见下
   • 测试现象：打开浏览器刷新
     
     • 服务器会有一条访问记录
       
     • 浏览器有一条请求记录，但response显示NO Data，同时控制台报跨域的错误，使用flask跨域包后，可以正常得到数据。
       

from flask import Flask
from flask import request
from flask_cors import CORS

app = Flask(__name__)
# CORS(app)   #跨域的库，打开就跨域

@app.route('/')
def hello_world():
    print request
    return 'Hello World!'

if __name__ == '__main__':
    app.run()

loadXMLDoc()
function loadXMLDoc()
{
    var xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            console.log(xmlhttp.responseText)
        }
    }
    xmlhttp.open("GET","http://localhost:5000/",true);
    xmlhttp.send();
}