搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理-CSDN博客

本文链接：https://blog.csdn.net/weixin_36968382/article/details/135959042

本文介绍了前端跨域的概念、同源策略及其限制，详细讲解了JSONP的工作原理和使用方法，以及CORS的机制。此外，还探讨了Vue中的axios如何处理跨域，并介绍了反向代理（如Vue代理、Node.js和Nginx）作为解决跨域问题的手段。最后，文章提到了其他跨域解决方案，如iframe、location.hash和window.name，以及H5的postMessage API。

摘要由CSDN通过智能技术生成

什么是跨域

跨域：一个域下的文档或脚本试图去请求另一个域下的资源

广义的跨域包含一下内容：

1.资源跳转(链接跳转，重定向跳转，表单提交)
2.资源请求(内部的引用，脚本script，图片img，frame)
3.script内部发起的请求(ajax，dom请求，和js跨域调用

跨域问题出现：

只有浏览器端出现，直接用终端请求，是不会出现跨域拦截，是属于浏览器端的安全策略，浏览器将不同源的请求进行了拦截，限制了跨域资源访问

什么是同源

同源策略：same origin policy，如果两个资源(页面)`协议`,`域名`,`端口`都相同，那么就是同源。

即使：两个不同域名指向同一个ip，也算非同源

非同源(跨域)有哪些限制

* cookie，localstorage，indexDB无法读取
* Dom和JS对象无法互通
* Ajax请求不能发送

常见的跨域demo

URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同，子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

前端解决跨域的方法

JSONP
- 原理：由于在一个页面内部js如果要访问另一个非同源域的数据是被浏览器限制的，但是浏览器在解析和加载script标签的时候，是允许一个页面加载多个域的js标签，而js标签其实又是类似一种get请求的方式，只是返回的数据是一个JSON格式的脚本对象。
- 用法：将get请求封装到script标签中，利用script标签做get请求，最后解析script标签数据
- 代码：
```
  var  script = document.createElement('script')
  script.style = 'text/javascript'

  //将要请求的
```