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

Enlightenment 发布于2019-08-21 14:15 / 2755人阅读

摘要：原文链接随着前端越来越火，越来越多的人推崇前后端分离，后端只提供，前端只负责消费。这样我们就能更加专注自己的事情了，比如前端可以使用任何想要的工具等等，后端也不用因为集成前端的代码而苦逼加班了。

原文链接

随着前端越来越火，越来越多的人推崇前后端分离，后端只提供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 /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,
      ...
    ]
  }
})

更多参考

http-proxy-middelware

add http-proxy-middleware as api proxy

Chrome

你也可以通过添加chrome插件来支持跨域
CORS Toggle

云服务器 GPU云服务器前后端分离前后端分离开发 js前后端分离框架前后端不分离 jsp

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87829.html

网站部署

摘要：就鹿晗宣布恋情导致微博宕机事件浅谈大型网站高可用性架构中午吃饭刷着刷着微博发现微博突然挂了。用户在使用浏览器访问一个网站时需要先通过协议向服务器发送请求，之后服务器返回文件与响应信息。 webpack：从入门到真实项目配置自从出现模块化以后，大家可以将原本一坨代码分离到个个模块中，但是由此引发了一个问题。每个 JS 文件都需要从服务器去拿，由此会导致加载速度变慢。Webpack 最主...

endless_road 2019-06-24 17:57 评论0 收藏0
Django前后端分离实践

摘要：更新尝试了一下实现前后端分离，新的文章如下前后端分离之初试更新可另外用实现前后端分离，这篇文章可能局限性太大，只是个人的入门实践刚刚学习前端快一年，后台方面了解甚少，于是决定踩踩坑，学习一下。 2018.9.6更新：尝试了一下REST framework实现前后端分离，新的文章如下Django前后端分离之REST framework初试 2018.8.27更新：可另外用 restful...

Mike617 2019-07-30 17:32 评论0 收藏0
《从零构建前后分离 WEB 项目》序 - 开源的意义

摘要：尽量按照前端后端部署运维来讲，当然中途涉及到跨域这种前后协调的还是无法避免捎带一笔。关于我目前在写从零构建前后分离项目系列，修正和补充以此为准不断更新的项目实践地址彩蛋提前预览下一章传送门序：开源的意义本系列提前首发地址背景从事了近4年的互联网行业，逐渐担当过团队的前端到后端的负责人，和大家一样从小白逐渐的成长起来，回首望去几年前的博客还是那么稚嫩。回首这几年：从一个ja...

seasonley 2019-06-24 18:09 评论0 收藏0
实现前后端分离的心得

摘要：实现前后端分离的心得对目前的来说，前后端分离已经变得越来越流行了，越来越多的企业网站都开始往这个方向靠拢。前后端工作分配不均。实现前后端分离的心得对目前的web来说，前后端分离已经变得越来越流行了，越来越多的企业/网站都开始往这个方向靠拢。那么，为什么要选择前后端分离呢？前后端分离对实际开发有什么好处呢? 为什么选择前后端分离在以前传统的网站开发中，前端一般扮演的只是切图的工作...

zilu 2019-08-26 12:25 评论0 收藏0