將Apache后端與Angular應用程式一起使用的CORS問題

我正在開發一個應該連接到 Apache 后端的 Angular 應用程式。apache REST API 作業正常，我可以在 Postman 上使用它，但由于 CORS 問題讓我發瘋，我沒有設法從我的角度應用程式中使用它。我已經檢查了所有內容，但錯誤仍然存??在，我可以繼續前進。

讓我解釋一下環境和情況：

• 該應用程式正在向后端發送 POST 請求。我試過發送和不發送 header 'Access-Control-Allow-Origin':'*'，但在這兩種情況下都失敗了。
• apache 標頭已啟用。
• apache2.conf 檔案不包含有關此問題的任何標頭配置。
• 我網站的 .htaccess 檔案是空的。
• API 站點的 apache 配置站點是：

<Directory "/home/javierd/test">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride None
        Order deny,allow
        Allow from all
        Require all granted

    Header unset Access-Control-Allow-Origin   env=AccessControlAllowOrigin
    Header unset Access-Control-Allow-Methods  env=AccessControlAllowOrigin
    Header unset Access-Control-Allow-Headers  env=AccessControlAllowOrigin
    Header unset Access-Control-Expose-Headers env=AccessControlAllowOrigin
    
    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
</Directory>

Alias /test "/home/javierd/test/html/www"

據我所知，這應該可行，但每次我嘗試訪問我得到的 API

Access to XMLHttpRequest at 'http://localhost/test/rest' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

And I don't really know why there are mutiple * values. I have also tried with simpler configurations, using just Header set Access-Control-Allow-Origin "*" (without the always). With this config I get a similar CORS error:

Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

However, as I mentioned previously, the API is working with postman.

I have also tried using a proxy with the angular cli, but I endup getting 404 errors although the logs show that the proxy is working. My proxy config file is the following one:

{
  "/test": {
    "target": "http://localhost/test",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

but the logs show

[HPM] POST /test/rest/login -> http://localhost/test

so I don't really know if the petitions are being redirected or not.

I know there are lots of questions regarding CORS and Apache/Angular, and I have read lots of them, but I can't figure out a solution.

Could somebody help me?

Thanks a lot!

uj5u.com熱心網友回復：

使用 .htaccess

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"

提示：將星號 (*) 更改為發送 POST 的主機/ip/域！

為了提高安全性，您可以在方法中設定 POST 屬性。

取決于您的服務器的配置，您可以重新加載 apache。這取決于您的 AllowOverride 指令。

uj5u.com熱心網友回復：

它限制了您的網路瀏覽器 localhost 如果您使用的是 chrome，您可以禁用網路安全

Win   R

然后運行這個 cmd

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

uj5u.com熱心網友回復：

在 php 腳本的頂部，您可以添加以下代碼以全域禁用 CORS：

/**
 * 
 * Access Control
 * 
 */
if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');    // cache for 1 day
}


if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    }
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) {
        header("Access-Control-Allow-Headers:        {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
    }

    exit(0);
}

提示：出于安全原因，您可以將 VAR $_SERVER['HTTP_ORIGIN'] 更改為發送 POST 的 IP/HOST/DOMAIN。

標籤：php angular apache cors

上一篇：while回圈沒有關閉

下一篇：UI應用程式未使用VIPURL打開，但UI應用程式使用ApacheHTTPDURL按預期作業