同源策略，如何解决跨域

---

一.什么是同源策略

1.同源策略是一种约定。是浏览器最核心最基本的安全功能，避免其收到攻击，或被窃取数据

同源：协议 域名 端口

例：
http://www.test.com:8000/test.html

协议 子域名 主域名 端口 请求资源地址
只有协议 域名 端口一致才是同源

注意：即使两个不同的域名指向同一个ip地址，也是非同源

同源是浏览器的一种行为，当我们的请求发出去了，服务器也响应了，但是无法接收这就是非同源

二.跨域

协议、域名和端口任意一个不同

浏览器没有禁用安全限制

很多时候我们需要通过跨域来拿到数据

三.如何解决跨域

1.设置CORS跨域资源共享
请求头
请求方式 head get post

后台在请求头信息里面添加，在服务器端更改配置设置：
response.setHeader(“Access-Control-Allow-Origin”, “*”);

2.JSONP

JSONP也是解决同源问题的一种方法，可以让网页从别的域名(网站)中获取资料，既跨域读取数据

**在页面中类似于script标签img标签的src属性是不受同源限制的，所以可以用src属性直接获取到其它网站的资料 ， JSONP可用使用src等属性向非同源的服务器端请求数据

使用JSONP解决步骤
1.将非同源的请求地址写在script标签的src属性内

<script src='http://localhost:3003/jsonp?callback=fn'></script>

2.服务器端响应数据必须是一个函数的调用， 真正要发送给客户端的数据需要作为函数调用的参数。

var data = {
    name: '阎涛',
    age: '19'
}
var wse = {
        name: '涛涛涛'
    }

fn(wse)

3.在客户端全局作用域下定义函数

    function fn(val) {
       
        }

4.在函数内部对返回的数据进行处理

 function fn(val) {
            console.log(val);
        }

JSONP的缺点

1.只支持get请求
2.安全性低

优点兼容性强，不受同源限制