前端跨域请求及解决方案

什么是跨域请求

在前端开发编码过程中，常见的HTML标签例如：a、form、img、script、link、iframe以及ajax操作都可以指向一个资源地址或者说发起一个资源请求，那么这里所说的请求就存在同域请求和跨域请求。
2023-1-30日补充：
a、form、img、script、link、iframe是允许跨域的，但是如果link 了一个css文件，而css文件里通过@font-face的url引入了字体，那么会出现跨域问题。
注意： 只有使用了某个字体，即设置了font-family: 字体; 浏览器才会去请求那个字体文件。
所谓跨域请求就是指：当前发起请求的域与该请求所指向的资源所在的域不一致(协议、域名、端口，任意一个不一样都会导致)。

说明：
form表单提交没有跨域问题，例如：a页面有form表单，b页面的路径是提交地址。a页面submit后，浏览器刷新页面，页面显示b页面的内容。form表单是将数据提交给了b页面。a页面并没有读取b页面中的内容。

跨域请求为什么出现在前端中

既然同源策略是浏览器的核心基础安全策略，那为什么我们在进行前端开发特别是Ajax调用时还要进行跨域请求呢?同源策略是用来防御来自非法的攻击，但我们不能因为防御非法的攻击就将所有的跨域都拦截掉。
在现代前端开发中，我们经常需要调用第三方的服务接口(例如mock server、fake api)，随着专业化分工的出现有很多专业的信息服务提供商为前端开发者提供各类接口，这种情况下就需要进行跨域请求(这类前端接口服务很多是采用的cors方式来解决跨域问题的，下文会详细介绍)。
还有一类情况是在前后端分离的项目中，前端后端分属于不同的服务跨域问题在采用这种架构的时候就存在。而且现在很多项目都采用这种前后分离的方式，这类项目很多是会采用反向代理的方式来解决跨域问题。

跨域请求解决方案

修改浏览器的安全设置(不推荐)
JSONP(只能通过get方式)
跨域资源共享CORS(Cross-Origin Resource Sharing)
iframe（不推荐）
反向代理

JSONP

JSONP(JSON with Padding)是JSON的一种使用模式，可用于解决主流浏览器的跨
域数据访问问题，在早两三年前端解决跨域问题中经常出现这类解决方案。
JSONP的原理就是，Ajax.存在跨域安全问题但是script标签是不存在这类问题的，
于是乎就有人根据这个特性做文章找解决方案。

跨域资源共享CORS(Cross-Origin Resource Sharing)

CORS是一个新的W3C标准，它新增的一组HTTP首部字段允许服务器其声明哪些来源请求有权限访问哪些资源，换言之它允许浏览器向其声明了CORS的站进行跨域请求。
这种方式最主要的特点就是会在响应的HTTP首部增加Access-Control-Allow-Origin等信息，从而判定哪些资源站可以进行跨域请求，还有几个其他相关的HTTP首部进行更加精细化的控制，最主要的还是Access-Control-Allow-Origin。具体每个首部信息的含义可以去搜索详细了解下。
CORS与JSONP对比来说优势比较明显，JSONP只支持GET方式局限性很多，而且
JSONP并不符合处理业务的正常流程。采用CORS的方式，前端编码与正常非跨域请求
没有什么不同。在目前很多的Fake API (模拟接口服务)、Mock Server(数据模拟服务)以及其他公共服务上都很多采用CORS的方式来解决跨域问题,例如json-server等。

反向代理

既然不能跨域请求，那么我们不跨域就可以了，或者说在Nginx上设置Cors，这样也能解决跨域问题。参考链接：反向代理解决跨域问题。通过在请求到达服务前部署一
个服务，将接口请求进行转发，这就是反向代理。通过一定的转发规则可以将
前端的请求转发到其他的服务。以Nginx为例:
通过反向代理我们将前端后端项目统一通过反向代理来提供对外的服务，这样
在前端看上去就跟不存在跨域一样。
反向代理麻烦之处就在原对Nginx等反向代理服务的配置，在目前前后端分离
的项目中很多都是采用这种方式。

总结：

综上所述，CORS和反向代理是目前使用最多的解决方案，这两个解决方案使用
的场景并不相同，我们要根据自身的需求进行选择。公共服务、Fake API、Mock Server,般采用CORS的方案;而公司前后端分离的项目中更多是采用反向代理的方案。

前端跨域请求及解决方案相关推荐

第四节：跨域请求的解决方案和WebApi特有的处理方式
一. 简介前言: 跨域问题发生在Javascript发起Ajax调用,其根本原因是因为浏览器对于这种请求,所给予的权限是较低的,通常只允许调用本域中的资源, 除非目标服务器明确地告知它允许跨域调用. ...
第十八节：跨域请求的解决方案和WebApi特有的处理方式
一. 简介前言: 跨域问题发生在Javascript发起Ajax调用,其根本原因是因为浏览器对于这种请求,所给予的权限是较低的,通常只允许调用本域中的资源, 除非目标服务器明确地告知它允许跨域调用. ...
前端跨域请求-403
1.angular前端跨域请求 this.$http({method: 'POST',url: Url,data:param,headers: { 'Access-Control-Allow-Orig ...
深入理解前端跨域问题的解决方案——前端面试
深入理解前端跨域问题的解决方案--前端面试参考文章: (1)深入理解前端跨域问题的解决方案--前端面试 (2)https://www.cnblogs.com/greatluoluo/p/627346 ...
JQuery的Ajax跨域请求的解决方案
JQuery的Ajax跨域请求的解决方案参考文章: (1)JQuery的Ajax跨域请求的解决方案 (2)https://www.cnblogs.com/amylis_chen/p/4703735. ...
前端跨域问题及解决方案
document.domain 前端跨域问题及解决方案前端跨域问题及解决方案转载于:https://www.cnblogs.com/hideonbush/p/9775907.html
前端跨域请求原理及实践（加qq群：342430957）
一. 跨域请求的含义浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用. 一般的,只要网站的协议名protocol. 主机host. 端 ...
前端跨域请求get_解决前端跨域请求的几种方式
利用 JSONP 实现跨域调用说道跨域调用,可能大家首先想到的或者听说过的就是 JSONP 了. 1.1 什么是JSONP JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问 ...
前端跨域问题的解决方案
跨域是浏览器的一种安全策略,是浏览器自身做的限制,不允许用户访问不同域名或端口或协议的网站数据. 只有域名(主域名[一级域名]和二级域名).端口号.协议完全相同的时候,才允许通信. # 那么,如何解 ...