Question

我心烦张贴类似的问题，但花费超过3天，没能解决这个问题。

平台：Ionic 4 Angular 7

当我尝试发布时，我出现了cors政策错误。

从原点“ https://mersinders.com/api/service.php?run=giris”到“ http://localhost:8100”的XMLHttpRequest的访问已被CORS策略阻止：对预检请求的响应未通过访问控制检查：它没有HTTP正常状态。

当我禁用Chrome安全性时，一切正常。

“ C：\ Program Files（x86）\ Google \ Chrome \ Application \ chrome.exe” --disable-web-security --disable-gpu --user-data-dir =〜/ chromeTemp

HttpErrorResponse {headers：HttpHeaders，status：400，statusText：“ Bad Request”，url：“ https://mersinders.com/api/service.php?run=giris”，ok：false，...}

在Php api端使用以下标头后，问题开始。

header（'Status：400'，TRUE，400）; header（'Status：404'，TRUE，404）;

我有config.ini.php，其中包括db信息和连接，还有service.php，用于切换大小写“ service.php？run = XXXXX”。

当我在service.php中设置标题时

header（'Access-Control-Allow-Origin：*'）;
  header（“ Access-Control-Allow-Credentials：true”）;
  header（'Access-Control-Allow-Methods：GET，PUT，POST，DELETE，   选项”）； header（'Access-Control-Max-Age：1000'）;
  header（'Access-Control-Allow-Headers：Content-Type，Content-Range，   内容处置，内容描述'）;

include（'config.ini.php'）;

我得到以下错误。

在以下位置访问XMLHttpRequest 原产地的“ https://mersinders.com/api/service.php?run=giris” “ http://localhost:8100”已被CORS政策屏蔽：对预检请求未通过访问控制检查：否请求中存在“ Access-Control-Allow-Origin”标头资源。

当我在.htaccess中设置标题时

始终设置标题始终设置访问控制允许来源“ *” Access-Control-Allow-Methods“ POST，GET，HEAD”总是设置标题 Access-Control-Max-Age“ 1000”

我遇到错误。

在以下位置访问XMLHttpRequest 原产地的“ https://mersinders.com/api/service.php?run=giris” “ http://localhost:8100”已被CORS政策屏蔽：对飞行前请求未通过访问控制检查：它没有 HTTP正常状态。

但是在禁用安全的Chrome和邮递员上，一切正常。我也尝试过

proxy.config.json

{
    "/api/*": {
        "target": "https://mersinders.com",
        "secure": false,
        "logLevel": "debug"

    }
}

和ionic.config.json

{
    "name": "mersinders",
    "integrations": {
        "cordova": {}
    },
    "type": "angular",
    "proxies": [{
        "path": "/api/*",
        "proxyUrl": "https://mersinders.com"
    }]
}

和tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "proxies": [
    {
      "path": "/api/*",
      "proxyUrl": "https://mersinders.com"
    }
  ]
}

我的帖子功能

 var headers = new HttpHeaders();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json');
    headers.append('Access-Control-Allow-Origin', '*');

    let postData = {
      "username": this.userData.username,
      "password": this.userData.password,
      "clientIp": this.cekIp(),

    }
    console.log(postData);
    this.http.post(environment.SERVER_URL + "service.php?run=giris", postData,{ headers:headers, observe: 'response' })
      .subscribe(response => {
        if (response.status == 200 && response.body[0].ogretmen_token != "") {
          this.isUser.token = response.body[0].ogretmen_token;
          en_isUser.Loggedin = true;
          en_isUser.token = this.isUser.token;
          en_isUser.guid = this.isUser.guid;
          this.status.girisCode = response.status;
          //   this.storage.set('token',this.isUser.token);
          window.localStorage.setItem('token', this.isUser.token);
          this.router.navigate(['/tabs/anasayfa']);
        }
        console.log(this.isUser.token);
      }, error => {
        this.status.girisCode = error.status;
        this.isUpdated = error.error;
        console.log(error);
      });

问题1）我们如何解决cors政策错误。以及为什么我的标头只能在.htaccess中使用。

使用ionic 4本机HTTP发布帖子，但我想使用Angular 7 Http。感谢您的建议。

编辑：当我检查服务器中的日志时，看到了； AH01623：服务器配置拒绝客户端方法：“ OPTIONS”，

然后我用邮递员检查是否有问题。我看到，当我从chrome发布数据时，在邮递员中似乎是“ POST”，但在服务器上是OPTIONS并被阻止。

Edit1：经过更多尝试，我发现https://cors-anywhere.herokuapp.com/将OPTIONS请求转换为POST请求，这就是为什么它可以在chrome上运行的原因。

我试图通过邮递员提出OPTIONS请求，但失败了（405不允许）。但邮递员成功发布了POST请求。看来后端有问题。有人可以帮忙为什么标头可以在htaccess中工作，而不能在service.php文件中工作（可能吗：选项方法可以到达.htaccess，并且在服务器删除该请求之后？）。

Answer 1

我花了3天多的时间来解决cors问题，终于解决了。问题是httpd conf文件中不允许使用OPTIONS。我遵循以下步骤。

在这段时间内我遇到了。

错误1），这意味着您没有添加标题（“ Access-Control-Allow-Origin：*”）；到service.php文件

在以下位置访问XMLHttpRequest 原产地的“ https://mersinders.com/api/service.php?run=giris” “ http://localhost:8100”已被CORS政策禁止：否请求中存在“ Access-Control-Allow-Origin”标头资源。

错误2）的意思是“您发布了一些内容，但是如果服务器没有返回我们的状态，我们要检查安全性：200我们不会发布您的请求”。

在以下位置访问XMLHttpRequest 原产地的“ https://mersinders.com/api/service.php?run=giris” “ http://localhost:8100”已被CORS政策屏蔽：对飞行前请求未通过访问控制检查：它没有 HTTP正常状态。

最后，我在下面的service.php标头

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
}

// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        // may also be using PUT, PATCH, HEAD etc
        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);
}

发布功能

send(){
 var headers = new HttpHeaders();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json');
    headers.append('Access-Control-Allow-Origin', '*');

    let postData = {
      "username": this.userData.username,
      "password": this.userData.password,
      "clientIp": this.cekIp(),

    }
    console.log(postData);
    this.http.post(environment.SERVER_URL + "service.php?run=giris", postData,{ headers:headers, observe: 'response' })
      .subscribe(response => {
        console.log(response);
      }, error => {

        console.log(error);
      });

}

htaccess中没有任何内容。

在尝试解决此问题时，请遵循服务器日志。我想为没有花很多时间的人解释一下。

在ionic 4上使用Angular 7 post时发生cors策略错误

1 个答案: