前端配置跨域的具体指南

在现代Web开发中，跨域资源共享（CORS, Cross-Origin Resource Sharing）是一个非常重要的概念。浏览器出于安全思量，默认情况下不允许跨域哀求。如果你必要在前端与不同源的服务器举行通讯，就必须配置跨域支持。本文将先容如何在不同情况中配置跨域。


什么是跨域？

跨域是指在浏览器中，域名、协议、端口不同的情况下哀求资源的行为。例如：
哀求 URL: `http://example.com/api` 和 `http://example.net/api` 是跨域的。
哀求 URL: `https://example.com/api` 和 `http://example.com/api` 也是跨域的（因为协议不同）。

为什么必要跨域？

跨域策略（同源策略）是为了防止潜伏的安全风险，好比 CSRF（跨站哀求伪造）攻击。为了让不同来源的资源可以被共享，CORS 提供了一种安全的机制来允许服务器标识哪些域、方法、头部信息可以举行跨域哀求。
CORS 的根本流程

当浏览器发出一个跨域哀求时，会举行以下步骤：
1.  简朴哀求：如果哀求方法是 GET、POST、HEAD 并且满足其他特定条件，浏览器直接发起哀求。
2.  预检哀求（Preflight Request）：如果哀求包含自界说头部信息、非简朴哀求方法（如 PUT、DELETE），浏览器会先发出一个 `OPTIONS` 哀求以确认服务器是否允许跨域哀求。
3.  服务器响应：服务器响应头部中包含跨域相关的信息，浏览器根据这些信息决定是否允许跨域哀求。

 配置跨域的方式


跨域配置主要在后端服务器举行。不同的后端框架和服务器有不同的跨域配置方法
1. 利用 Node.js (Express)
在 Express 中，可以利用 [CORS 中间件](https://github.com/expressjs/cors)来轻松配置跨域支持。

2. 配置跨域支持在 Nginx
Nginx 作为反向署理服务器，也可以配置跨域。

3. 利用 Spring Boot (Java)3.利用Spring Boot（Java）
在 Spring Boot 项目中，可以通过在控制器层级或者全局范围内配置跨域支持。

4. 利用 Flask (Python)
在 Flask 中，可以利用 `flask-cors` 来处理跨域哀求。
本文利用配置跨域方法是在前端中办理


前端配置跨域的长处：

1.  方便开发阶段的调试：
    在开发情况中，前端署理可以快速配置并办理跨域题目，避免开发时频仍碰到浏览器的同源策略限制。开发者可以轻松访问不同域名下的 API 服务器。
2. 不必要修改后端代码：
 利用前端署理可以绕过后端服务器的跨域限制，不必要后端专门配置 CORS 支持。这在开发阶段尤其有用，因为后端开发者不必要额外处理跨域题目。
3.灵活性高：
   前端署理可以轻松修改、启用或关闭，特别是在开发情况中，署理可以根据不同的开发需求举行灵活调整，适应不同的 API 哀求。
4. 对第三方 API 友好：
 在开发中，前端哀求第三方 API 时，如果第三方没有开放 CORS 支持，利用前端署理可以避免跨域题目，继续调试和开发。
前端配置跨域的缺点：

1.仅在开发情况中有用：
   前端署理通常只在开发情况中工作（例如利用 `webpack-dev-server`），无法用于生产情况。在生产情况中，必须通过后端服务器配置 CORS，署理不能办理实际摆设中的跨域题目。
2.增长了开发情况的复杂性：
  尽管署理配置简朴，但它实际上并不是前端跨域题目的根本办理方案。项目标后期摆设仍旧必要处理跨域题目，利用署理大概会让初学者误以为跨域题目已经完全办理。
 3.署理哀求增长网络层次：
 前端署理将哀求转发到后端目标服务器，增长了一层额外的网络哀求。对于大型项目或频仍的   API 哀求，这大概会引入性能题目，固然在开发情况中不明显，但它会增长调试的复杂性。
4.与真实哀求情况不一致：
  在开发中通过署理的方式办理跨域题目，大概会让开发者忘记在生产情况中设置真实的跨域配置，导致上线时碰到跨域错误。如果开发和生产情况的哀求路径不一致，大概会导致不测的错误。
5.仅实用于浏览器情况：
    前端跨域署理只办理浏览器中的跨域题目，对于其他情况（如移动应用、桌面应用）并不实用。如果你的项目必要多个客户端举行交互，就必须在服务器端办理跨域题目。

  本文是在Vue 2和Vue CLI 情况中，可以通过配置开发服务器的署理来办理跨域题目。这种方法得当开发阶段，让我们能够方便地绕过跨域限制。在生产情况中，通常必要后端来处理跨域题目。


  配置步骤


   第一步：创建 `vue.config.js` 文件


   如果你的 Vue CLI 项目根目次下还没有 `vue.config.js` 文件，可以手动创建一个。配置proxy署理

1. vue.config.js
2. module.exports = {
3.   devServer: {
4.     proxy: {
5.       '/api': {
6.         target: 'http://backend-server.com', // 目标服务器的地址
7.         changeOrigin: true, // 是否跨域
8.         pathRewrite: { '^/api': '' } // 重写路径，将 /api 去掉
9.       }
10.     }
11.   }
12. }

复制代码

在这个配置中：
/api：是前端哀求的路径前缀，可以根据必要修改，例如 `/api` 表示我们想署理全部以 `/api` 开头的哀求。
target：表示你想署理到的后端服务器地址，通常是开发中利用的后端 API 服务地址。
changeOrigin：允许署理服务器修改哀求头中的源（origin），以便模拟跨域。
pathRewrite：可以重写 URL 路径，把匹配到的 `/api` 前缀去掉，避免后端服务器收到哀求时路径不匹配。

第二步：在前端发起哀求

在 Vue 项目中利用 `axios` 或 `fetch` 举行哀求时，你可以将前缀设置为 `/api`，从而触发署理功能。
利用 `axios` 发起哀求：

1. src/api/request.js
2. import axios from 'axios'

复制代码

// 配置基础路径，匹配 vue.config.js 中的 '/api'

1. const apiClient = axios.create({
2.   baseURL: '/api',
3.   timeout: 1000
4. })

复制代码

// 示例哀求

1. export const getData = () => {
2.   return apiClient.get('/data') // 实际请求地址为 'http://backend-server.com/data'
3. }
5. ```

复制代码

在这里，`/api` 会被署理到 `http://backend-server.com`，然后再哀求 `http://backend-server.com/data`。剩下的就是封装接口了，项目打包上线前必要把`baseURL`地址改回到真实接口地址`实际哀求地址`就行了

结论

在 Vue 2 和 Vue CLI 中通过配置署理的方式可以有用办理开发情况中的跨域题目，但在生产情况中，仍旧必要通过后端的 CORS 配置来处理跨域哀求。这种方法简朴高效，得当在项目开发过程中利用，极大地简化了前后端分脱离发的跨域调试题目。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。