前后端分离实践 — 如何解决跨域问题
Posted 阿力瓦
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前后端分离实践 — 如何解决跨域问题相关的知识,希望对你有一定的参考价值。
随着前端越来越火,越来越多的人推崇前后端分离,后端只提供API,前端只负责消费API。这样我们就能更加专注自己的事情了,比如前端可以使用任何想要的工具(Webpack、Gulp等等),后端也不用因为集成前端的代码而苦逼加班了。这里不讨论前后端分离的必要性,更多可参考
这里主要分享前后端分离后,如何解决跨域问题
服务端
Rails
作为一个Rails
程序员,首先分享一下在Rails
里面的解决方案, 大家可以使用一个rack-cors 中间件,并作以下配置:
#config/application.rb config.middleware.insert_before 0, "Rack::Cors", :debug => true, :logger => (-> { Rails.logger }) do allow do origins [‘http://localhost:3000‘] resource ‘*‘, :headers => :any, :methods => [:get, :post, :delete, :put, :options, :head], :max_age => 0 end end
Node
当然,如果后端是NodeJs
,我们也可以找到同样的中间件 cors 请看以下配置
var express = require(‘express‘) , cors = require(‘cors‘) , app = express(); // 同样的,只支持开发环境跨域 if(process.env.NODE_ENV == ‘development‘){ app.use(cors()); }
nginx
这时候,后端程序员可能会说,为了保持跟生产环境配置一直,请直接用 Nginx
来配置吧,这样能减少差异。啪啦啪啦...
直接看配置吧
root html; } location /api/v1 { proxy_set_header Host $host; proxy_set_header X-Forwarded-For $remote_addr; proxy_set_header X-Real-IP $remote_addr; # API Server proxy_pass http://localhost:4000; proxy_next_upstream error; } location / { proxy_set_header Host $host; proxy_set_header X-Forwarded-For $remote_addr; proxy_set_header X-Real-IP $remote_addr; # Frontend Server proxy_pass http://localhost:3000; proxy_next_upstream error; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } }
http-proxy-middleware
这时候前端也不服了,说,我们自己能搞定
PS: 其实这里用了Nginx配置之后,webpack的hot reload会存在比较大的延迟,具体原因还没研究
# 安装插件 cnpm install --save-dev http-proxy-middleware # 添加配置 import proxy from ‘http-proxy-middleware‘; const apiProxy = proxy(‘/api/v1‘, { target: ‘http://localhost:4000‘, changeOrigin: true, ws: true }); browserSync({ server: { baseDir: ‘src‘, middleware: [ apiProxy, ... ] } })
更多参考
(原文地址:https://segmentfault.com/a/1190000006263179)
以上是关于前后端分离实践 — 如何解决跨域问题的主要内容,如果未能解决你的问题,请参考以下文章