跨域问题,前后端该怎么做

从前端的角度来说,跨域请求主要有以下几种方案

    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中设置允许携带自定义头请求头。

对于前端开发者,虽然大部分知识也是必会的东西,但还是有些后端知识可以涉略下,以便深入的了解跨域问题

对于关闭浏览器安全策略这个方案,在上线项目中是不可能使用的

一是,安全问题、二是,不可能让用户去设置浏览器的

作为前端开发者,在后端还没解决好跨域问题时候,还是可以本地调试使用的

通过配置浏览器的启动参数,关闭同源策略启动, 不同的浏览器的启动方式不同
经验分享 程序员 微信小程序 职场和发展