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

跨域问题

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 }))