跨域问题,前后端该怎么做
从前端的角度来说,跨域请求主要有以下几种方案
-
JSONP 请求 跨域资源共享CORS 设置代理 proxy 跨域 document.domain window .name HTML5的postMessage WebSocket协议跨域
具体使用方法可以参考以下几篇文章
JSONP和CORS是最常用的处理跨域方法
对于JSONP方案,这是要和后端配合的方案,前端需要做的
JSONP 的原理是利用 script 标签的加载不受同源策略的限制,动态的加载一个<script>callback(data);</script>标签并执行对应的 callback 来实现的。JSONP 返回的是一个 callback 的函数。在ajax返回之后,调用这个函数,就可以拿到数据。 JSONP方案的缺点,只支持get方式。
对于CORS和设置代理 proxy完全是后端的工作了。
这篇文章里,从后端开发者的角度讲述了
-
什么是跨域请求
非同协议、同域名、同端口的ajax请求
-
产生跨域请求的原因
浏览器的同源策略导致了跨域请求
-
如何解决跨域请求
关闭浏览器安全策略 JSONP方案 被调用方解决跨域(支持跨域) 调用方解决跨域(隐藏跨域)
文中还细分了
-
携带cookie的跨域方式
跨域请求时,浏览器默认不会发送cookie,需要设置XMLHttpRequest的withCredentials属性为true,同时服务端就需要在响应头中添加Access-Control-Allow-Credentials为true 注意,Access-Control-Allow-Credentials : true 时, Access-Control-Allow-Control: *是不被允许的,需要单独指定域
-
带有自定义头的跨域请求
在Access-Control-Allow-Headers中设置允许携带自定义头请求头。
对于前端开发者,虽然大部分知识也是必会的东西,但还是有些后端知识可以涉略下,以便深入的了解跨域问题
对于关闭浏览器安全策略这个方案,在上线项目中是不可能使用的
一是,安全问题、二是,不可能让用户去设置浏览器的
作为前端开发者,在后端还没解决好跨域问题时候,还是可以本地调试使用的
通过配置浏览器的启动参数,关闭同源策略启动, 不同的浏览器的启动方式不同
上一篇:
通过多线程提高代码的执行效率例子
下一篇:
如何在计算机中快速新建TXT文本文档