前后端分离实践 — 如何解决跨域问题
Posted SegmentFault
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
更多配置请参考 rack-cors
Node
当然,如果后端是NodeJs
,我们也可以找到同样的中间件 cors 请看以下配置
var express = require('express')
, cors = require('cors')
, app = express();
// 同样的,只支持开发环境跨域
if(process.env.NODE_ENV == 'development'){
app.use(cors());
}
nginx
这时候,后端程序员可能会说,为了保持跟生产环境配置一直,请直接用 Nginx
来配置吧,这样能减少差异。啪啦啪啦…
直接看配置吧
server {
listen 80;
# 配置可访问域名,注意需要添加相应host配置
server_name xxx.dev;
#charset koi8-r;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location /istore/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,
...
]
}
})
更多参考
http-proxy-middelware
add http-proxy-middleware as api proxy
Chrome
你也可以通过添加 chrome 插件来支持跨域,CORS Toggle:https://chrome.google.com/webstore/detail/omcncfnpmcabckcddookmnajignpffnh
-EOF-
【活动推荐】国内顶级黑客大会—— KCon 黑客大会,将于 8 月 26-28 日在帝都凯宾斯基举办,感受你所幻想过的黑客氛围,就在 KCon!
点击「阅读原文」,即可报名活动!
以上是关于前后端分离实践 — 如何解决跨域问题的主要内容,如果未能解决你的问题,请参考以下文章