前端跨域访问

Posted 2021-05-16 穷少年

文章目录

• 什么是同源策略
• 什么是跨域请求
• • 请求跨域了，那么请求发出去没有？
• cors跨域实现
• • post跨域请求，必须要设置Content-Type

什么是同源策略

同源是指"协议+域名+端口"三者相同。
同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。

什么是跨域请求

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。

同源策略限制内容有：
Cookie、LocalStorage、IndexedDB 等存储性内容
DOM 和 Js对象无法获得
AJAX 请求发送后，结果被浏览器拦截了

请求跨域了，那么请求发出去没有？

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么 Ajax 就不会?因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF，因为请求毕竟是发出去了。

cors跨域实现

CORS 需要浏览器和后端同时支持，但实现 CORS 通信的关键还是后端。

后端服务器在response(响应)头上添加一下参数：

// 设置允许来自哪个地址的请求可以通过跨域
response.setHeader("Access-Control-Allow-Origin","http://localhost:9000");
// 设置允许的请求头，*通配符代表任意，例如允许特定请求头：Access-Control-Allow-Headers:x-token,authorization....
response.setHeader("Access-Control-Allow-Headers","*");
// 设置允许跨域请求方法类型，默认允许get 例如允许get，post方法：Access-Control-Allow-Methods:Get,Post
// 同样可以设置通配符*代表允许所有方法
response.setHeader("Access-Control-Allow-Methods","*");

post跨域请求，必须要设置Content-Type

"Content-Type: application/x-www-form-urlencoded;"