前后端分離后開發階段跨域問題處理

FrozenMap 發布于2019-07-25 14:05 / 542人閱讀

摘要：前后端分離之后，開發階段接口聯調就會出現跨域問題。當然，跨域問題的解決方案還是挺多的，這里梳理下我接觸到的幾種方案。對于前端開發者來說，通信與同源的通信沒有差別，代碼完全一樣。后端實現接口只需合理設置，以為例

前后端分離之后，開發階段接口聯調就會出現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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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