javascript - Node 开发服务器和 Spring Boot 应用程序之间的跨源请求被阻止

Question

我的堆栈如下:

后端:Spring boot(Java)暴露于:8088

前端:Vue 托管在 Node 开发服务器上，暴露于:8080

在前端，我在 http-common.js 中重新配置 axios 以将 baseURL 放入 Spring boot 应用程序，并允许来自 Node 的连接开发服务器:

import axios from 'axios'

export const AXIOS = axios.create({
  baseURL: `http://localhost:8088`,
  headers: {
    'Access-Control-Allow-Origin': 'http://localhost:8080'
  }
})

但是，当尝试发出 post 请求登录时，我将在控制台中收到以下消息:

跨源请求被阻止:同源策略不允许读取 http://localhost:8088/api/login 处的远程资源。 (原因:CORS 预检 channel 未成功)。

这让我想到:Spring Boot 应用程序有问题吗？

但是，在主方法中，当从运行在 :8080 的 Node 应用程序到达 /api/* 端点时，我已全局启用 CORS:

@Bean
public WebMvcConfigurer corsConfigurer() { // Enables CORS globally
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/api/*").allowedOrigins("http://localhost:8080");
        }
    };
} 

对我来说，它看起来应该配置正确。然而，到目前为止，以下用户名+密码的 POST 根本没有到达后端 Spring boot 应用程序。问题一定出在 Node 应用程序上吗？

这是前端的登录方法:

login ({commit}, authData) {
      AXIOS.post('/api/login', {
        username: authData.username,
        password: authData.password,
        withCredentials: true
      })
        .then(res => {
          console.log(res)
          commit('authUser', {
            token: res.data.idToken,
            userId: res.data.localId
          })
        })
        .catch(error => console.log(error))
    }

为了进一步巩固我的观点，我可以 cURL 到 Spring Boot 应用程序并获得正确的响应(有效的 JWT!):

请求:

curl -i -H "Content-Type: application/json" -X POST -d '{
        "username": "sysadmin",
        "password": "sysadmin"
        }' http://localhost:8088/api/login

回应:

HTTP/1.1 200
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
X-Application-Context: application:8088
authentication: <very long JWT string>
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked

因此，通过 cUR - 我得到了 HTTP 200 OK 和有效的 JWT。但通过 :8080 中的相同 POST 方法，我收到 403 和警告消息。

根据其他帖子，我尝试将 CORS 添加到我的开发服务器配置(Node/Express)中:

var app = express()

app.use(cors())
app.options('*', cors())
app.use(function (req, res, next) {

  // Website you wish to allow to connect
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8088')

  // Request methods you wish to allow
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE')

  // Request headers you wish to allow
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type')

  // Set to true if you need the website to include cookies in the requests sent
  // to the API (e.g. in case you use sessions)
  res.setHeader('Access-Control-Allow-Credentials', true)

  // Pass to next layer of middleware
  next()
})

结果和之前一模一样

Answer 1

将“Access-Control-Allow-Origin” header 添加到 ajax post 调用中是没有用的，因为它是 cors 规范的一部分，并且必须由服务器设置为 http 响应的一部分。

export const AXIOS = axios.create({
  baseURL: `http://localhost:8088`,
  headers: {
    //you can remove this header
    'Access-Control-Allow-Origin': 'http://localhost:8080'
  }
})

您可以curl应用程序，因为cors异常是由浏览器不允许您访问有效负载引起的。浏览器在任何跨域调用之前执行预检 (OPTION) 请求，并且在您实际的 http 请求之前执行预检 (OPTION) 请求，以确保您有权查看有效负载，您只需检查网络选项卡下的控制台即可看到它。

问题很可能是服务器端的，不知何故，您没有正确配置 http 响应的 cors header 。

确保您不仅设置 Access-Control-Allow-Origin header (必须包含特定域，而不是 *，因为您处于凭据模式)，甚至还设置 Access-Control-Allow-Credential，因为您正在发送凭据和 Access-Control-Allow-Methods(必须至少包含 PUSH 和 OPTION 方法)

在 chrome 开发工具控制台的网络选项卡下，如果检查 ajax 调用，您可以看到 http 响应的 header ，最终应该是这样的。