[每天进步一点点~] 浏览器跨域问题

1. 什么是跨域？

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

同源策略限制了一下行为：

• Cookie、LocalStorage 和 IndexDB 无法读取
• DOM 和 JS 对象无法获取
• Ajax请求发送不出去

1.1 同源策略

• 所谓的 同源 是指，域名、协议、端口 均为相同。
• 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
• 只有在地址的： 协议名、域名、端口名
  相同的情况下，才允许访问相同的cookie、localStorage或是发送Ajax请求等等。
• 若在不同源的情况下访问，就称为跨域。

1.2 协议

协议 即通信协议，比如我们现在常见的http和https，如果当前页面地址使用 http 协议，请求的地址使用 https 协议，那么这个请求就存在跨域问题。

1.3 域名

域名 即网站网址，如 baidu.com，360.com 存在跨域。

1.4 端口号

端口号 即域名对应的服务器的监听端口，这个我们一般是看不到的，因为一般服务器都使用80端口，浏览器默认为80端口，所以不需要在域名后再写出端口号。当8080端口发出的请求为80端口时，也存在跨域。

2. 为什么会有跨域的问题？

跨域问题来源于浏览器的 同源策略，浏览器为了提高网站的安全性，在发送ajax请求时，只有在当前页面地址 与 请求地址的协议+域名+端口号相同时才允许访问，否则会被拦截。

这个就是同源策略的保护，如果浏览器对 javascript 没有同源策略的保护,那么一些重要的机密网站将会很危险。

3. 解决跨域的方法

3.1 jsonp 跨域

• jsonp跨域 其实也是JavaScript设计模式中的一种代理模式。
• 在html页面中通过相应的标签从不同域名下加载静态资源文件是被浏览器允许的，所以我们可以通过这个“犯罪漏洞”来进行跨域。
• JSONP（是一种非正式传输协议），该协议的一个要点就是允许用户传递一个callback 参数给服务端。
• 做法：一般，我们可以动态的创建script标签，再去请求一个带参网址来实现跨域通信。

举例：
在http://study.cn/json/jsonp/jsonp_2.html下请求一个远程的js文件，代码如下：

// 或者另外 2 种写法
// 方法 1 ：原生的实现方式，写在 js 中
let script = document.createElement('script');

script.src = 'http://www.nealyang.cn/login?username=Nealyang&callback=callback';

document.body.appendChild(script);

function callback(res) {
  console.log(res);
}

// 方法 2：jquery也支持jsonp的实现方式。缺点：只能发送get请求
$.ajax({
    url:'http://www.nealyang.cn/login',
    type:'GET',
    dataType:'jsonp',//请求方式为jsonp
    jsonpCallback:'callback',
    data:{
        "username":"Nealyang"
    }
})

远程的message.js文件是

image.png

这个时候我们得到的相应头是:

image.png

这样就实现跨域成功了。因为服务端返回数据时会将这个callback参数(message)作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了

资料地址：[ https://www.cnblogs.com/liubingyjui/p/10804785.html ]

3.2 CORS（跨域资源共享）

3.3 使用代理（如nginx）