首页　>　文章列表　>　Vue 中如何进行跨域请求？

Vue 中如何进行跨域请求？

vue 请求跨域
471 2023-06-12

Vue是一种流行的JavaScript框架，用于构建现代化的Web应用程序。在使用Vue开发应用程序时，常常需要与不同的API交互，而这些API往往位于不同的服务器上。由于跨域安全策略的限制，当Vue应用程序在一个域名上运行时，它不能直接与另一个域名上的API进行通信。本文将介绍几种在Vue中进行跨域请求的方法。

1. 使用代理

一种常见的跨域解决方案是使用代理。在这种情况下，Vue应用程序通过向同一服务器发出HTTP请求来绕过浏览器的同源策略。服务器接收请求，并将它们转发给实际的API。由于代理服务器与API位于同一域上，浏览器不会对此发出跨域安全限制。以下是如何设置代理的示例：

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

在上面的示例中，我们将所有以/api开头的请求代理到https://example.com上。changeOrigin设置为true表示将源设置为target的地址，并设置pathRewrite以将/api从请求中删除。

2. JSONP（仅限GET请求）

JSONP是一种旧的跨域解决方案，它使用GET请求在不同的域上动态添加一个<script>标签。通过将callback函数名作为参数传递，服务器可以将JSON数据包裹在回调函数中返回给客户端。由于脚本源不受同源策略的影响，因此浏览器不会限制从不同域返回的脚本。该方法仅适用于GET请求，因为它没有请求主体。

以下是JSONP的示例：

export default {
  getData() {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      const url = 'https://example.com/data?callback=getdata';

      script.src = url;
      document.head.appendChild(script);

      window.getdata = (data) => {
        document.head.removeChild(script);
        delete window.getdata;
        resolve(data);
      }
    });
  }
}

在上面的示例中，我们使用Promise来封装JSONP的请求，创建一个<script>标签并将其添加到document.head中。当服务器返回数据时，将回调函数的名称设置为window.getdata，在回调函数中删除<script>标签，并将数据传递给resolve回调。

3. CORS

跨域资源共享（CORS）是一种现代的跨域解决方案，它允许服务器指定哪些来源（域名）有权限访问API。服务器通过返回特定的响应标头来实现此目的。当浏览器发出跨域请求时，它会在预检请求中请求服务器访问控制响应头来验证是否允许请求。如果API返回此响应头，浏览器将允许跨域请求。

以下是一个CORS的示例：

export default {
  getData() {
    return fetch('https://example.com/data', {
      method: 'GET',
      mode: 'cors',
      headers: {
        'Access-Control-Allow-Origin': '*'
      }
    })
      .then(response => response.json())
      .then(data => data);
  }
}

在上面的示例中，我们使用fetch函数来获取API数据，同时将mode设置为cors，以启用CORS。我们还在请求头中设置了Access-Control-Allow-Origin标头，该标头允许所有来源访问API。请注意，为了使CORS正常工作，服务器必须在响应中返回这个标头。