背景
跨域是指从一个域名的网页去请求另一个域名的资源，由于浏览器的同源策略，会导致跨域请求失败，这在前端开发中经常会出现的问题。
为什么要遵守同源策略
同源策略（Same Origin Policy）是一个重要的安全策略。
由于浏览器的同源策略，当一个域名下的网页想要访问到另一个域名的资源时，浏览器会先检查该请求的源（协议、域名、端口号）是否与目标资源的源相同，如果源不同，则该请求会被拒绝。
这一策略可以有效地保护用户的隐私和安全，防止恶意网站通过跨域请求来窃取用户的敏感信息。
解决方案
- JSONP
JSONP 是一种在跨域请求中使用的简单技术，它利用了 <script> 标签可以请求跨域资源的特性来完成数据的传输。
JSONP 的实现原理是在请求时将一个回调函数名作为参数传递到服务器端，服务器根据该函数名动态生成一个包裹了数据的 JavaScript 代码，浏览器接收到该 JavaScript 代码后自动执行回调函数，通过这种方式完成跨域请求。
JSONP 的示例代码如下：
-- ------ -------- ------------------- - ------------------ - -- -- ----- -- ----- ------ - --------------------------------- ---------- - ------------------------------------------------ ----------------------------------
- CORS
CORS（Cross-Origin Resource Sharing）是一种新的跨域请求解决方案，它通过在服务端设置响应头来允许跨域请求。
CORS 方案有三种形式：简单请求、预检请求和带凭据请求。
简单请求是指请求方法为 GET、POST 或 HEAD 的请求，且请求头不超出以下几个字段：Accept、Accept-Language、Content-Language、Content-Type （只限于三个MIME类型：text/plain、multipart/form-data、application/x-www-form-urlencoded）。
预检请求是指满足以下情况之一的请求：
- 使用了除 GET、POST、HEAD 以外的方法；
- Content-Type 请求头不属于上述三个。
- 发送了自定义的请求头。
带凭证请求，CORS 默认不会带上 Cookie 和 HTTP 认证等凭据信息，如果需要可以将 XMLHttpRequest 的 withCredentials 属性设置为 true。
CORS 的示例代码如下：
----- --- - --- -----------------
------------------- - ----- -- -------
---------------------- - ---------- -
-- --------------- --- -- -
-- ----------- --- ---- -
------------------------------
-
-
--
--------------- --------------------------
--------------------------------------- ---------
------------ 代理
代理是前端开发中常用的一种跨域请求解决方案，它的原理是通过服务端代理转发请求，将跨域请求转为同域请求。
具体实现方法是前端发送请求到服务端，服务端收到请求后向目标服务器发送请求，将结果返回给前端。
代理的示例代码如下：
-- ----
----- --- - --- -----------------
---------------------- - ---------- -
-- --------------- --- -- -
-- ----------- --- ---- -
------------------------------
-
-
--
--------------- -----------------------------
-----------
-- --------------
----- ---- - ----------------
----- ------- - -------------------
----- ------ - ----------------------- ---- -- -
-- ---------------------------- -
----- --- - ----------------------- ----------------------
-----------------------
- ---- -
-------------- ---------
-
---
--------------------总结
以上是前端项目出现跨域问题的解决方法，具体方法选择应根据实际情况而定。在使用过程中需要注意数据的安全性和兼容性，尽可能选择符合标准的解决方案。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6647783bd3423812e460065b