随着互联网的飞速发展，Web 应用程序越来越受到人们的关注和重视。RESTful API 作为 Web 应用程序的重要组成部分，越来越多的开发者开始使用它来构建强大的应用程序。但是在应用 RESTful API 进行开发时，经常遇到的一个问题就是由于浏览器的同源策略，导致跨域访问时会被禁止。本文将会针对这个问题给出一些解决方案。
什么是跨域访问？
在 Web 应用程序中，同一源是指协议、主机名和端口号都相同的两个页面。如果一个页面从一个源加载了 HTML、JavaScript 和 CSS 文件，然后试图从另一个源请求数据，这就是跨域访问。浏览器在默认情况下会禁止这种行为，这会导致出现一些问题。
跨域访问的问题
跨域访问会出现以下两个问题：
问题一：不允许跨域调用其他页面的脚本，Ajax 就是一个跨域调用的示例。如果你的页面需要调用其他网站的内容，比如调用 API 获取数据，将会遇到这个问题。
问题二：如果无法读取其他域的 cookie，也会引起跨域问题。同样的，如果你要通过 iframe 嵌入其他站点的页面，也不能通过 JavaScript 访问其中的 DOM。
解决跨域访问的方案
下面将会介绍一些常见的解决跨域访问的方案。
使用 JSONP
JSONP 是 JSON with Padding(填充式 JSON 或参数式 JSON) 的缩写，它是一种跨域解决方案。JSONP 的原理是利用 script 标签可以跨域加载资源的特性，通过在 URL 参数中添加回调函数名，后端服务器在返回数据之前会加上回调函数名和括号，将数据封装成 JavaScript 代码返回，通过回调函数来执行数据的处理。
以下是一个 JSONP 的示例：
function myCallback(jsonData) { // 处理返回的数据 } var script = document.createElement('script'); script.src = 'http://example.com/api?callback=myCallback'; document.head.appendChild(script);
在上面的示例中，我们定义了一个回调函数 myCallback，然后创建了一个 script 标签，并将请求 URL 设置为包含回调函数名的 URL。服务器端在返回数据时，会将数据封装为 JavaScript 代码，并将回调函数名作为参数传递进去。
使用代理服务器
代理服务器可以解决同源策略的问题，因为代理服务器本身并不受同源策略限制。通过代理服务器，我们可以将跨域请求代理到一个可以访问该资源的服务器上。这个服务器可以是我们自己的服务器，也可以是其他服务器，只要可以访问目标资源即可。
以下是一个使用代理服务器的示例：
fetch('/api/abc') .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error(err));
在上面的示例中，我们向 /api/abc 发送了一个请求，这个请求其实是被代理服务器拦截，并将请求转发到目标服务器上。该示例使用了 fetch 函数，这是现代浏览器支持的一种新的 AJAX 发送数据的方式，它支持 Promise 和 async/await。
跨域资源共享(CORS)
CORS 是一种众所周知的跨域解决方案，它需要服务端实现。CORS 全称为 Cross-Origin Resource Sharing，即跨域资源共享。它通过 HTTP 头来告诉浏览器，哪些跨域请求是允许的，哪些是不允许的，这样浏览器在请求时就会自动带上正确的头信息。
以下是一个使用 CORS 的示例：
-- -------------------- ---- ------- ------------------------------- - ------- ------- -------- - --------------- ------------------ -- ----- ---------------- ----- ----- ---- -- -- --------- -- ----------- ---------- -- ------------------ ---------- -- --------------------展开代码
在上面的示例中，我们向 http://example.com/api 发送了一个 POST 请求，并使用了 fetch 函数来发送请求。服务端应该在响应头中加入 Access-Control-Allow-Origin，来明确允许哪些来源访问该资源。
结语
本文介绍了一些常见的解决跨域访问的方法。它们各有优缺点，开发者可以根据自己的需求来选择合适的解决方法。解决跨域是一个必要的过程，在实际应用中也非常常见。通过掌握解决跨域访问的技能，开发者可以更加灵活地应用 Web 技术来解决实际问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cdd2c9e46428fe9e78eb80
