前端开发中的跨域解决方案

跨域

跨域资源共享,用于让网页的受限资源能够被其他域名的页面访问的一种机制。 通过该机制,页面能够自由地使用不同源的图片、样式、脚本、iframes以及视频。一些跨域的请求常常会被同源策略所禁止的。跨源资源共享定义了一种方式,为的是浏览器和服务器之间能互相确认是否足够安全以至于能使用跨源请求。

在项目开发中,大多数时间跨域问题都是由后端进行解决,而不是由前端进行解决。

如果当后端无法进行解决,比如说:前端直接调用其它公司的API,你联系不上其它公司的后端或者其它原因,就只有前端解决跨域。

现代前端项目几乎都是基于WebPack打包,所以其实解决跨域也是非常简单的,我看了很多文章都讲的很复杂,看了之后会让人一头雾水,提供了很多种方法,但是让人家看了后不知道选择哪种。

所以下面的文章中,除了http proxy现在这种常用的跨域解决方案需要掌握外,其它的跨域解决方案了解一下就可以了,如果实在是有需求,比如老项目等,再去了解其它解决跨域的方法。

http proxy(常用)

webpack webpack-dev-server

直接将最常用的放在首位来讲解,这种方法也是目前前端解决跨域最常用的方式,基本只要学会这个就可以了,其它的做一个了解,知道有这个东西,如果以后遇到对应的情况,再通过它们进行解决。

vue,react等一切使用webpack进行打包的项目都可以使用这种解决方案,使用方法也非常简单。

就上面这简单的几行代码,就可以解决跨域问题。

JSONP

JSONP需要服务器端的支持

JSONP只能处理GET请求。

CORS跨域资源共享

视频

9种前端跨域解决方案详解(2020)


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!