关于跨域问题的总结

目录

问题描述

解决方法以及原理

拓展知识

问题描述

为什么会出现跨域：出于浏览器同源策略的限制。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。

什么是跨域：当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

同源策略的影响：域名A向域名B发送Ajax请求，或操作Cookie、LocalStorage、indexDB等数据，或操作dom，js就会受影响，但请求css，图片等静态资源不受影响

解决方法以及原理

1、CORS：跨域分享资源的缩写，W3C准备，跨源AJAX请求的根本解决方法。

   服务器返回响应的时候在响应头设置一个允许跨域的header：，可以自己使用中间件写，也可以使用第三方包cors（http://www.ruanyifeng.com/blog/2016/04/cors.html  

2、代理：这种方法一般用于前后端分离的项目。以Vue中proxyTable为例，proxyTable的代理原理为：在本地运行npm run dev等命令时实际上是用node运行了一个服务器，因此proxyTable实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了代理，因此不会出现跨域问题。

3 、jsonp

• jsonp是利用script标签的src属性，向不同源的接口发送一个get请求，携带一个回调函数callback，函数的值是在html页面   定义的函数的函数名，服务器接收到参数后将其拼接为函数的调用返回
• jsonp不是请求，只是个js脚本（https://blog.csdn.net/hansexploration/article/details/80314948）

拓展知识：

1、http与https的区别？https安全性更强，具有SSL加密传输协议

2、Response header与Request header属性的基本知识：https://blog.csdn.net/weixin_43453386/article/details/83792682