Vue中的Ajax：解除跨域枷锁，畅享数据交互

2023-10-26 08:54:31

Vue.js 中 Ajax 跨域请求：破除障碍，畅通无阻

Ajax 跨域请求的必要性

在单页面应用程序（SPA）盛行的时代，Ajax 已成为 Vue.js 生态系统中不可或缺的一部分。它使前端应用程序能够与服务器进行异步通信，实现无缝的数据交互和动态页面更新。然而，由于浏览器同源策略的存在，跨域 Ajax 请求常常面临阻碍。

浏览器同源策略：安全壁垒还是创新羁绊？

浏览器同源策略是一种安全机制，旨在防止恶意网站获取或修改来自其他网站的敏感数据。该策略规定，一个脚本只能与与其同源的服务器进行通信，同源性由协议、域名和端口共同决定。

虽然同源策略保障了用户的隐私和安全，但也给跨域数据交互带来了挑战。例如，在 SPA 中，前端和后端可能部署在不同的域名下，导致 Ajax 请求跨越了同源边界，触发安全机制的拦截。

跨域请求的破局之路

为了绕过浏览器同源策略的限制，开发者们创造了多种解决方案，包括 CORS、JSONP 和 Preflight 请求。

CORS（跨域资源共享）：跨域交互的救星

CORS（Cross-Origin Resource Sharing）是一种 HTTP 头机制，允许浏览器在不同源之间进行安全的数据交换。服务器通过设置 CORS 头，指定哪些域有权访问其资源，并允许浏览器在发送请求前进行预检（Preflight）。

JSONP（JSON with Padding）：跨域数据的巧妙借道

JSONP（JSON with Padding）是一种将 JSON 数据封装在函数调用的技术。服务器将 JSON 响应包装在一个回调函数中，前端通过 <script> 标签加载该函数，从而间接获取跨域数据。

Preflight 请求：跨域请求的预检

在 CORS 中，为了确保跨域请求的安全，浏览器会发送一个 Preflight 请求。该请求是一个 OPTIONS 请求，用于询问服务器是否允许实际的跨域请求。服务器通过响应头指示浏览器是否允许请求，以及允许的请求方法、头和负载。

Vue 中 Ajax 跨域请求实战

在 Vue 中使用 Ajax 进行跨域请求，需要根据不同的解决方案采取不同的策略。

CORS：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://example.com/api',
  withCredentials: true
});

instance.get('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

JSONP：

const callbackName = 'myCallback';
const url = `https://example.com/api/users?callback=${callbackName}`;

const script = document.createElement('script');
script.src = url;

window[callbackName] = function(data) {
  console.log(data);
};

document.head.appendChild(script);

Preflight 请求：

服务器端设置 CORS 头：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

客户端发送 Preflight 请求：

const request = new XMLHttpRequest();

request.open('OPTIONS', 'https://example.com/api/users', true);
request.setRequestHeader('Content-Type', 'application/json');

request.onload = function() {
  if (request.status === 200) {
    // 实际请求
    request.open('GET', 'https://example.com/api/users', true);
    request.setRequestHeader('Content-Type', 'application/json');
    request.send();
  } else {
    console.error('Preflight request failed');
  }
};

request.onerror = function() {
  console.error('Preflight request failed');
};

request.send();