先后端分离实践 — 如何解决跨域问题

时间 2019-11-05

标签后端分离实践如何解决问题繁體版

原文原文链接

随着前端愈来愈火，愈来愈多的人推崇先后端分离，后端只提供API，前端只负责消费API。这样咱们就能更加专一本身的事情了，好比前端可使用任何想要的工具（Webpack、Gulp等等），后端也不用由于集成前端的代码而苦逼加班了。这里不讨论先后端分离的必要性，更多可参考html

这里主要分享先后端分离后，如何解决跨域问题webpack

服务端

Rails

做为一个Rails程序员，首先分享一下在Rails里面的解决方案, 你们可使用一个rack-cors 中间件，并做如下配置:git

#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 请看如下配置github

var express = require('express')
  , cors = require('cors')
  , app = express();

// 一样的，只支持开发环境跨域
if(process.env.NODE_ENV == 'development'){
    app.use(cors());
}

Nginx

这时候，后端程序员可能会说，为了保持跟生产环境配置一直，请直接用 Nginx 来配置吧，这样能减小差别。啪啦啪啦...
直接看配置吧web

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";
    }
}

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