前后端分离架构下的跨域问题与解决方案

在现代Web开发中,特别是随着前后端分离架构的普及,跨域问题成为了开发者必须面对的一个重要议题。本文将详细介绍什么是跨域问题、其产生的原因以及如何从前端和后端两个角度来解决这个问题,并提供一些实用的代码示例。

一、跨域问题概述

1. 定义

跨域问题是指当一个资源试图从一个源加载时,如果该资源的域名、协议或端口号与当前网页的域名、协议或端口号不同,则会被浏览器阻止访问。这是为了防止恶意网站读取另一个网站的数据,从而保护用户的隐私和安全。

2. 常见场景

  • 前端页面部署在一个服务器上,而后端API部署在另一个服务器。
  • 开发环境与生产环境使用不同的域名或端口。

例如:

  • https://example.com/api 与 https://example.com:8080/api 不同源(端口不同)
  • https://example.com/api 与 http://example.com/api 不同源(协议不同)
  • https://example.com/api 与 https://sub.example.com/api 不同源(域名不同)

 

二、跨域问题产生原因

1. 同源策略

浏览器遵循同源策略(Same-origin policy),即只有当请求的URL的协议、域名和端口号都相同的情况下,才允许获取资源。任何一项不匹配都会导致跨域问题。

2. 预检请求(Preflight Request)

对于非简单请求(如PUT, DELETE等),浏览器会先发送一个OPTIONS请求到目标服务器,询问服务器是否允许此次跨域请求。如果服务器响应正确,浏览器才会继续发送实际请求。

 

三、解决方案

(一)前端解决方案

1. Proxy代理

在开发环境中,可以使用前端工具(如 Webpack Dev Server、Vite)配置代理服务器,将跨域请求转发到目标服务器。

示例(Vue.js/Vite 配置):

// vite.config.js
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://backend-api.com',  // 后端API地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

原理:
前端请求发送到同域名的代理服务器(如http://localhost:3000/api),代理服务器再将请求转发到实际的后端服务器(如http://backend-api.com),从而避免浏览器的同源策略限制。

 

2. JSONP

JSONP 是一种古老的跨域解决方案,利用了

你可能感兴趣的:(微服务入门指南,架构,go,微服务,json,proxy模式)