iT邦幫忙

0

請教如何架設 Proxy Server 處理跨網域 API POST (更新20211020)

Jax 2021-10-18 15:09:34831 瀏覽

以前的經驗對方(API)都會設定好 header 並提供金鑰之類的,所以可以直接使用 jquery $.ajax() 將表單資料 POST 到跨網域的 API 並取得回傳值。

後來看到一些文章說可以透過 Proxy Server 來處理,查了一些資料但是還是搞不太明白:
如何架設 Proxy Server 來處理 POST?
一定得要用 Node.js 嗎? 別的 Http server (比如 Apache) 沒有辦法?


補充:
這是我參考的文章資料
https://medium.com/@korver2017/%E6%88%91%E7%9A%84%E7%AC%AC%E4%B8%80%E5%80%8B-node-js-cors-proxy-69e5009f7834

---20211020---
Apache 反向代理 Proxy Server 的方法大致上實做出來了,謝謝各位提供的資訊與提點!做法如下:

目標 API URL:https://xxx.domain/demo_api/_ajax_post.php
客端 URL:http://127.0.0.1:8066/index.html
(我是 localhost 安裝 Apache 並設定運作 port 為 8066 來實驗)

  1. Apache 要啟用 proxy_module 和 proxy_http_module
  2. Apache 設定反向代理:
<IfModule proxy_module>
  ProxyPass /api_proxy_demo http://xxx.domain/demo_api/
  ProxyPassReverse /api_proxy_demo http://xxx.domain/demo_api/
</IfModule>

相關參考資料:https://httpd.apache.org/docs/2.4/mod/mod_proxy.html
PS:不需要也絕對不要使用 ProxyRequests On 來設定。

  1. 如此一來便可以透過以下網址來界接API
    http://127.0.0.1:8066/api_proxy_demo/_ajax_post.php
    連接網址與客端瀏覽頁面是相同網域
    就可以直接利用 $.ajax() 來進行 POST 並取得回傳結果。

補充一點:目標 API 的 Server 如果有設定 301 重定向
比如 .htaccess 有設定 RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
會導致網址又被導回目標 API 的實際網址,又變回跨域連接的狀態,便無法使用反向代理的方式。

客端頁面:index.html (隨便弄一個表單,利用 $.ajax() 來 POST)

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Apache Prox</title>
</head>
<h1>Apache Proxy</h1>
<form id="proxy">
  <input name="name" type="text" value="" />
  <input name="time" type="text" value="" />
  <input type="submit" value="Send" />
</form>
<div id="proxy_post">...</div>
<script>
$(function () {
  $("#proxy").submit(function(event){
    event.preventDefault();
    postvalue = {};
    $(this).find("input").each(function () {
      postvalue[this.name] = this.value;
    });
    request = $.ajax({
      url: 'http://127.0.0.1:8066/api_proxy_demo/_ajax_post.php',
      type: "post",
      data: postvalue,
      dataType: 'json',
      ContentType: 'application/json; charset=UTF-8',
      success: function(result) {
        console.log(result);
        $('#proxy_post').html(JSON.stringify(result));
        $.each(result, function(key, data){
          $('#proxy_post').append("<li>" + key + ":" + data + "</li>");
        });
      },
      error: function(result) {
        $('#proxy_post').html("error:"+JSON.stringify(result));
      }
    });
  });
});
</script>
</body>
</html>

API:_ajax_post.php

<?php
//設定回傳格式為 json
header('Content-type:text/json');
$resule = [];
if(@$_POST["name"]=="AA"){
  echo(json_encode($_POST));
}else{
  $resule += ["error"=>999];
  echo(json_encode($resule));
}
?>
提示:CURL
Jax iT邦新手 5 級 ‧ 2021-10-19 08:42:16 檢舉
謝謝回覆,對,其實我也正在實作不如做一個同源(同domain)的API先代為接收要POST的值,然後這支API再轉POST到跨域的API,因為同源政策實際上只是瀏覽器在擋。

這篇寫得不錯:
https://ithelp.ithome.com.tw/articles/10253549

1 個回答

1
海綿寶寶
iT邦大神 1 級 ‧ 2021-10-19 08:50:06
最佳解答

如何架設 Proxy Server 來處理 POST?

只要架設 Proxy Server 就好
他會處理所有 HTTP 的要求,包含 POST,GET...

一定得要用 Node.js 嗎? 別的 Http server (比如 Apache) 沒有辦法?

不一定要用 Node.js
Apache也可以
就看你會不會用

你有碰到 CORS 的問題嗎?
你有權限在 server 上安裝 Proxy Server 嗎?
你要先看懂你那篇文章
再來想安裝 Proxy server

Jax iT邦新手 5 級 ‧ 2021-10-19 10:11:45 檢舉

理解了,謝謝(一值誤以為是某種 js server)

我要發表回答

立即登入回答