拨云见日：Vue-cli 3.x + axios 跨域方案踩坑指北

Vue.js 和 axios 是前端开发中炙手可热的利器，但当涉及跨域请求时，开发者们往往会遇到各种各样的问题。本文将为你一一揭开这些跨域谜团，并提供行之有效的解决方案。

跨域资源共享（CORS）

跨域资源共享（CORS）是一种允许浏览器向不同源的服务器发出请求的机制。简单来说，就是允许来自一个源的网页向另一个源的服务器发送请求，从而实现资源的共享。CORS 通过在 HTTP 头部添加额外的信息来实现跨域请求。

常见错误和解决策略

在进行跨域请求时，开发者们可能会遇到以下常见错误：

• No 'Access-Control-Allow-Origin' header is present on the requested resource.

  这个错误表明服务器没有发送 Access-Control-Allow-Origin 头部。这是必须的，因为它告诉浏览器请求是否被允许。要解决此错误，需要在服务器端配置 Access-Control-Allow-Origin 头部。

• The 'Access-Control-Allow-Origin' header contains multiple values.

  这个错误表明服务器发送了多个 Access-Control-Allow-Origin 头部。只允许有一个 Access-Control-Allow-Origin 头部。要解决此错误，需要在服务器端确保只有一个 Access-Control-Allow-Origin 头部。

• The value of the 'Access-Control-Allow-Origin' header is not equal to the supplied origin.

  这个错误表明 Access-Control-Allow-Origin 头部的值不等于请求的来源。这意味着服务器不允许来自请求来源的请求。要解决此错误，需要在服务器端配置 Access-Control-Allow-Origin 头部，允许来自请求来源的请求。

JSONP：一种替代方案

如果由于某种原因无法在服务器端配置 CORS，则可以使用 JSONP（JSON with Padding）作为替代方案。JSONP 是一种允许跨域请求的 JavaScript 技术。它利用 <script> 标签的跨域特性，将请求发送到服务器，并使用回调函数来处理服务器返回的 JSON 数据。

其他可行方案

除了 CORS 和 JSONP 之外，还有其他可行方案可以解决跨域问题，例如：

• 使用代理服务器。代理服务器可以充当中间人，将请求转发到服务器，从而绕过跨域限制。
• 使用 WebSocket。WebSocket 是一种双向通信协议，可以实现跨域通信。
• 使用服务端渲染。服务端渲染可以在服务器端生成 HTML，然后将 HTML 发送给客户端，从而避免跨域问题。

结语

跨域请求是前端开发中常见的难题，但只要掌握了正确的解决方案，就可以轻松克服。本文详细介绍了 CORS、JSONP 等跨域解决方案，并提供了常见的错误和解决策略。希望本文能够帮助开发者们在跨域请求中披荆斩棘，一帆风顺。