【知识点总结】前端如何解决跨域问题

今天为了弄明白h5的一个小项目里面的跨域问题，研究了半天跨域问题，写一篇文章总结一下。

什么是跨域

1.浏览器规定：浏览器在解析Ajax请求时，要求浏览器的路径与Ajax的请求的路径必须满足三个要求，则满足同源策略，可以访问服务器。也就是说跨域问题是出现在浏览器与服务器之间，而服务器与服务器之间不存在跨域问题。

2.何为同源策略：同源指的是两个页面具有相同的协议、主机和端口，三者有任一不相同即会产生跨域。

访问本地文件时是否跨域

是

为什么，因为访问本地计算机中的文件，使用的是file协议。

本地服务器如何解决跨域问题

为要访问的json文件开一个端口服务，确保文件协议与项目协议相同。
（启动一个项目就要占用一个端口，给端口发请求，服务器通过端口发回来数据） 参考文章： blog.csdn.net/AiHuanhuan1…

file协议与http协议的一些不同

———————— 23.10.12更新——————————

前端跨域问题

如何处理跨域问题

1. cors解决跨域问题

后端人员在返回响应的时候加特殊的响应头，于是当服务器把数据回传给浏览器的时候，尽管浏览器监测到产生了跨域问题，但是它收到服务器同意将数据给开发人员的指令，于是浏览器将数据给开发人员展示出来，便解决了跨域问题，这也是真正意义的解决跨域问题。

缺点：当使用cors解决跨域问题时，会产生安全隐患，因为这样所有人都可以请求该服务器拿到数据。

2. jsonp解决跨域问题

利用了script标签中的src属性在引入外部资源不受同源策略限制的特点巧妙地实现了解决跨域问题。

缺点：需要前后端人员配合才能实现，比较麻烦，最重要的是该方法只能解决get请求跨域问题，不能解决post、delete等跨域问题。

3.postmessage

postMessage是HTML5引入的一种跨文档通信的机制，可以在不同的窗口或框架之间传递数据，即使这些窗口或框架不属于同一个源。

/**
* localhost:10002/index页面
**/
// 接收消息
window.addEventListener('message', (e) => {
     console.log(e.data)
})
// 发送消息
const targetWindow = window.open('http://localhost:10001/user');
setTimeout(()=>{
     targetWindow.postMessage('来自10002的消息', 'http://localhost:10001')
}, 3000)

/**
* localhost:10001/user页面
**/
window.addEventListener('message', (e) => {
     console.log(e.data)
     if (event.origin !== "http://localhost:10002") 
         return;
     e.source.postMessage('来自10001的消息', e.origin)
})

4. 代理服务器解决跨域问题：

1. nginx, 后端开启代理服务器
2. react、vue提供了proxy代理，通过在proxy里面配置地址，可以将浏览器的请求通过代理服务器发给目标服务器