如何解决前后端分离跨域问题

编程 · 2023-12-07 · 307 人浏览

跨域问题

CORS(Cross-Origin Resource Sharing,跨源资源共享),也叫跨域资源共享,是一种基于HTTP头的机制,该机制通过允许服务器标示除了它自己以外的其他源(域、协议或端口),使得浏览器允许这些源访问加载自己的资源。

出现跨域问题的主要原因是同源策略的限制。同源策略是浏览器的一种安全策略,是浏览器的行为,而且只针对fetch、xhr请求。只要协议、主机、端口之一不一致,就不同源。

响应头解决

要实现CORS很简单,只需在服务端添加响应头:Access-Control-Allow-Origin: *

代理解决

前端服务器若是用express的话,只需安装一个插件:npm i http-proxy-middleware --save-dev,然后在express服务器启动代码中加入:

import {createProxyMiddleware} from 'http-proxy-middleware'

// ...

app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080', changeOrigin: true }))
JavaScript
Theme Jasmine by Kent Liao