前后端分离后开发阶段跨域问题处理

FrozenMap 发布于2019-07-25 14:05 / 522人阅读

摘要：前后端分离之后，开发阶段接口联调就会出现跨域问题。当然，跨域问题的解决方案还是挺多的，这里梳理下我接触到的几种方案。对于前端开发者来说，通信与同源的通信没有差别，代码完全一样。后端实现接口只需合理设置，以为例

前后端分离之后，开发阶段接口联调就会出现ajax跨域问题。
当然，跨域问题的解决方案还是挺多的，这里梳理下我接触到的几种方案。

一、禁用Chrome的同源策略

目测这是最简单粗暴的方案

可以通过使用Chrome命令行启动参数来改变Chrome浏览器的设置。
这里使用的是disable-web-security参数，这个参数可以降低Chrome浏览器的安全性，禁用同源策略。要支持跨域，还需要加上user-data-dir。

下面以Windows为例。
1.先关闭所有的Chrome窗口。
2.新建一个Chrome快捷方式，右击->属性->快捷方式。
3.在目标(T)中设置参数：

--args --disable-web-security --user-data-dir

4.点击应用/确定，以这个快捷方式打开Chrome浏览器，效果如下：

二、webpack-dev-server代理

devServer: {
    ...
    proxy: {
        "/api": {
            target: "http://127.0.0.1:8080",
            pathRewrite: {"^/api": "/api/v1"}
        }
    }
}

将 "/api" 通过本地开发服务器webpack-dev-server转发到 "http://127.0.0.1:8080"，即转发到后端服务。pathRewrite用于路径转换，具体取决于你请求的uri与后端服务实际uri的差异，比如你本地起的80端口，你的uri为 "http://localhost/api"，将为转换成 "http://127.0.0.1:8080/api/v1"。
详细配置请移步 webpack devServer。

三、nginx反向代理

http {
    ...
    server {
        ...
        location /api/ {
            proxy_pass http://127.0.0.1:8080
        }
    }
}

四、后端实现CORS接口

CORS需要浏览器和服务器同时支持。目前所有现代浏览器都支持该功能，IE浏览器不能低于IE10。
对于前端开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。

后端实现CORS接口只需合理设置Response Header，以node为例：

const express = require("express");
let app = express();
app.all("*", (req, res, next) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    next();
});
...

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

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

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

前后端分离下的CAS跨域流程分析

摘要：这种情况通常发生在反向代理的时候，前端发起请求代理服务器，代理服务器发起请求到，这时候就容易导致域名不一致，请一定要注意这点。写在最前前后端分离其实有两类：开发阶段使用dev-server，生产阶段是打包成静态文件整个放入后端项目中。开发阶段使用dev-server，生产阶段是打包成静态文件放入单独的静态资源服务器中，如nginx。这两种方案最大的区别就是生产阶段。由于第...

ckllj 2019-08-26 12:02 评论0 收藏0
前后端分离下的CAS跨域流程分析

摘要：这种情况通常发生在反向代理的时候，前端发起请求代理服务器，代理服务器发起请求到，这时候就容易导致域名不一致，请一定要注意这点。写在最前前后端分离其实有两类：开发阶段使用dev-server，生产阶段是打包成静态文件整个放入后端项目中。开发阶段使用dev-server，生产阶段是打包成静态文件放入单独的静态资源服务器中，如nginx。这两种方案最大的区别就是生产阶段。由于第...

DevTalking 2019-08-15 18:15 评论0 收藏0
前后端分离下的CAS跨域流程分析

摘要：这种情况通常发生在反向代理的时候，前端发起请求代理服务器，代理服务器发起请求到，这时候就容易导致域名不一致，请一定要注意这点。写在最前前后端分离其实有两类：开发阶段使用dev-server，生产阶段是打包成静态文件整个放入后端项目中。开发阶段使用dev-server，生产阶段是打包成静态文件放入单独的静态资源服务器中，如nginx。这两种方案最大的区别就是生产阶段。由于第...

jay_tian 2019-08-02 10:38 评论0 收藏0
Node.js作为中间层实现简单的前后端分离

摘要：基本逻辑如下图所示对此做了一个点赞的，逻辑不复杂，但达到了作为中间层实现前后端分离的目的。零、用koa2实现前后端分离的点赞＋1的功能（欢迎clone和star） Github：https://github.com/pengxiaohua/praise-by-koa简书：http://www.jianshu.com/p/c3215333655a 一、前后端不分离存在什么问题之前做一...

moven_j 2019-06-28 13:53 评论0 收藏0
Nginx反向代理解决前后端联调跨域问题

摘要：反向代理前后端联调跨域什么是跨域跨域，指的是浏览器不能执行其他网站的脚本。这时候，用反向代理实现跨域，是最简单的跨域方式。 keywords： Nginx反向代理前后端联调跨域 1.什么是跨域跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。所谓同源是指，域名，协议，端口都相同。浏览器执行javascrip...

QiuyueZhong 2019-07-25 13:59 评论0 收藏0