同源策略： 浏览器自带的一种安全策略，他是指协议、域名、 端口三个都相同的才能互相访问，即若协议、域名、端口有一个不相同时，浏览器禁止页面加载或执行与自身不同域的脚本。
那既然有同源的概念，那必定有不同源的概念，接下来我们来看一个组例子， 理解一下什么是同源，什么是不同源。
| url | 是否同源（以及原因） |
|---|---|
| http://www.example.com:80 | 该 url 与下列的 url 比较 |
| http://www.example.com:80/index.html | 同源（协议、域名、端口都相同） |
| http://www.example.com:5000 | 不同源（端口不同） |
| https://www.example.com:80 | 不同源（协议不同） |
| http://www.each.com:80 | 不同源（域名不同） |
为什么浏览器会有同源策略？ 因为如果没有同源策略，别人就可以轻松的获取我们网站的 cookie 信息， 或是对网页进行DOM操作， 要知道这都是非常恐怖的， 尤其是 cookie 信息， 它里面存在着 sessionID ，这是与服务端的 session 会话的重要凭证， 要是被别人得到了 cookie ， 可能会造成数据被盗取等后果。
2 同源策略的应用上面了解了同源策略的定义，但是那还是挺抽象的，那我们接下来来看一下实战中的同源策略是什么样的，借此来更深刻的理解一下同源策略的定义。
2.1 项目目录结构我们的主体网址是：http://127.0.0.1:5000
# app.py
import json
from flask import Flask, request, render_template
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello World!'
@app.route('/index')
def index():
return render_template('index.html')
@app.route('/test')
def helloworld():
callback = request.args.get("callback")
if not callback:
return render_template('test.html')
return_data = {"status": 200, "test": "test"}
return callback + "(" + json.dumps(return_data) + ")"
if __name__ == '__main__':
app.run(debug=True)
test
test
2. 2 请求与自身同域的脚本文件
我们通过jquery的 ajax 来请求 http://127.0.0.1:5000/test
index
index
浏览器访问结果：
因为 http://127.0.0.1:5000/test 与 http://127.0.0.1:5000/ 是同源的，所以成功请求成功， 浏览器也没有报错。
我们通过jquery的 ajax 来请求 http://localhost:5000/test
index
index
浏览器访问结果：
因为 http://locahost:5000/test 与 http://127.0.0.1:5000/ 是不同源的，所以浏览器会报出以上错误。
实现不同域的脚本文件访问的方法有很多种，以下举几个例子：
- 通过html几个特殊的标签进行访问
- 通过jsonp来实现跨域请求
- 通过CORS（跨域资源共享）实现跨域请求
- 通过代理实现跨域请求（例如nginx 、node中间件）
其实在 html 里有几个标签是存在 src 属性的，例如