随着前端越来越火，越来越多的人推崇前后端分离，后端只提供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,
...
]
}
})
更多参考
Chrome
你也可以通过添加chrome插件来支持跨域 CORS Toggle