释放Vue潜能：轻松玩转跨域和部署，一统天下

前端

2024-01-01 12:43:43

Vue2 中级指南 - 04 Vue 中跨域以及打包部署到 nginx 跨域设置

大家好，欢迎来到Vue2中级指南系列的第四篇章——Vue中跨域以及打包部署到nginx跨域设置。本指南将带您步步深入Vue跨域和nginx部署的奥秘，让您在开发项目时挥洒自如、指点江山。

跨域，拦路虎？

当您在本地开发Vue项目时，您是否曾遇到过这样一个问题：在本地环境中运行的前端程序无法访问远程服务器上的接口数据？

这并不是什么新鲜事，而是前端开发中常见的跨域问题。跨域，是指浏览器限制来自不同域的脚本获取和操作其他域资源的限制。这个限制是为了防止恶意网站窃取用户数据，保护用户隐私和安全。

在Vue中，跨域问题同样存在。如果您希望在本地开发环境中访问远程服务器上的接口数据，那么您需要对Vue项目进行跨域配置。

打破藩篱，跨域配置

在Vue中，跨域配置主要有两种方式：使用代理服务器和使用CORS。

代理服务器

代理服务器是一个充当中间人的服务器，它可以转发请求并返回响应，从而绕过跨域限制。

在Vue中，我们可以使用axios库来配置代理服务器。axios是一个非常流行的HTTP库，它支持代理服务器配置。

// main.js
import axios from 'axios'

// 配置代理服务器
axios.defaults.proxy = {
  host: '127.0.0.1',
  port: 8080
}

CORS

CORS（Cross-Origin Resource Sharing）是一种浏览器机制，它允许来自不同域的脚本获取和操作其他域的资源。

在Vue中，我们可以通过在服务器端设置CORS头来启用CORS。

// server.php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

远征nginx，跨域部署

当您将Vue项目打包部署到nginx服务器上时，您可能会再次遇到跨域问题。

这是因为nginx服务器默认情况下会阻止跨域请求。为了解决这个问题，我们需要对nginx服务器进行跨域配置。

# nginx.conf
location /api {
  proxy_pass http://127.0.0.1:8080;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}