随着前端越来越火，越来越多的人推崇前后端分离，后端只提供API，前端只负责消费API。这样我们就能更加专注自己的事情了，比如前端可以使用任何想要的工具（Webpack、Gulp等等），后端也不用因为集成前端的代码而苦逼加班了。这里不讨论前后端分离的必要性，更多可参考
#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
endvar express = require('express')
, cors = require('cors')
, app = express();
// 同样的，只支持开发环境跨域
if(process.env.NODE_ENV == 'development'){
app.use(cors());
}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 /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";
}
}# 安装插件
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,
...
]
}
})
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent