从 http://localhost:8080 请求时不允许使用 Apache 服务器方法

Question

如果我的代码格式错误或我在 Apache 服务器上配置错误，我无法理解。我正在 VueJs2 中开发应用程序，它正在 http://localhost:8080 上工作（通过 npm 运行 dev），我正在我的 Apache2 服务器 (MAMP) 上发出请求，该服务器在 myapp.test 上有虚拟主机。我已经启用了我知道的所有 Access-Control 选项，但是每当我在 get 请求（在 js 代码中）中设置 header 时，开发人员工具都会显示此请求方法是 OPTIONS 并且我未被授权。如果我在我的 JS 代码中删除 headers，请求响应是 200 OK（方法 GET）。

这是我来自 vuejs2 的 js 代码

this.$http.get(this.$apiUrl + `rest/api/public/User/user/` + payload.id_user, {
    // if i remove this headers, request works OK
    headers: {
        'Content-Type': 'application/json',
        'JwtToken': token
    }
})

这是我的 apache 虚拟主机配置

<VirtualHost *:80>
    ServerName spotscouting.test
    ServerAlias *.spotscouting.test
    ServerAdmin info@spotscouting.test
    DocumentRoot "/Users/davorpecnik/workspace/spot-scouting-adminpage"
    LogLevel debug
    ErrorLog "/Users/davorpecnik/workspace/spot-scouting-adminpage/rest/application/logs/spotscouting.test-error_log"
    CustomLog "/Users/davorpecnik/workspace/spot-scouting-adminpage/rest/application/logs/spotscouting.test-access_log" common
    <Directory   "/Users/davorpecnik/workspace/spot-scouting-adminpage">
        Options Indexes FollowSymLinks
        AllowOverride All
        Allow from all
    </Directory> 
    Header set Access-Control-Allow-Origin "*" 
    Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" 
    Header set Access-Control-Allow-Headers "*"
    Header set Access-Control-Max-Age "1000"
</VirtualHost>

开发者工具中的网络

你能告诉我哪里出了问题吗？如果您需要任何其他信息，请告诉我，我会提供。谢谢

Answer 1

您似乎遇到了 CORS 问题。发出 pre-flight 请求（OPTIONS 请求），因为您将 'Content-Type' header 设置为 'application/json'。您可能想尝试将 'OPTIONS' 添加到 allow-headers

Content-Type 通常可以，但仅适用于以下值：

application/x-www-form-urlencoded
multipart/form-data
text/plain

See here for explanation

Answer 2

OPTIONS 是在进行 http 调用时发送的 pre-flight 请求。

如here

中所述

In CORS, a preflight request with the OPTIONS method is sent, so that the server can respond whether it is acceptable to send the request with these parameters. The Access-Control-Request-Method header notifies the server as part of a preflight request that when the actual request is sent, it will be sent with a POST request method. The Access-Control-Request-Headers header notifies the server that when the actual request is sent, it will be sent with a X-PINGOTHER and Content-Type custom headers. The server now has an opportunity to determine whether it wishes to accept a request under these circumstances.

在您的 Apache 虚拟主机中，在

中添加选项

Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"

您还需要设置适当的 header 才能成功请求。对于JWT Token，可以通过Authorization发送header.

this.$http.get(this.$apiUrl + `rest/api/public/User/user/` + payload.id_user, {
    // if i remove this headers, request works OK
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + token
    }
})

从 http://localhost:8080 请求时不允许使用 Apache 服务器方法

Apache server Method Not Allowed when requesting from http://localhost:8080

javascript

apache

virtualhost

node.js

vuejs2