使用Vue Apollo Composable获取数据时遭遇CORS跨域问题

我在使用Vue结合Apollo Composable获取数据时碰到了CORS跨域问题。服务器响应正常，GraphQL Playground和Postman都能返回预期数据，但开发环境运行正常，生产环境却出问题了。以下是错误信息及详情：

错误信息 #

Mozilla浏览器 #

A request to a non-origin resource has been blocked: the "Same Origin Policy" does not allow loading remote resources from "http://127.0.0.1:8080/graphql/" (failed CORS request). Status code: (null).

Brave浏览器 #

POST http://127.0.0.1:8080/graphql/ net::ERR_BLOCKED_BY_CLIENT

错误详情 #

生产环境下Mozilla的OPTIONS请求头（无法正常工作） #

OPTIONS /graphql undefined
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0
Accept: */*
Accept-Language: pl,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization,content-type
Referer: http://10.0.129.33/
Origin: http://10.0.129.33
Connection: keep-alive
DNT: 1
Sec-GPC: 1

生产环境下Mozilla的POST请求头（无法正常工作） #

POST /graphql undefined
Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0
Accept: */*
Accept-Language: pl,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Referer: http://10.0.129.33/
content-type: application/json
authorization: Bearer
Content-Length: 354
Origin: http://10.0.129.33
Connection: keep-alive
DNT: 1
Sec-GPC: 1

开发环境下Mozilla的POST请求头（可正常工作） #

POST /graphql/ HTTP/1.1
Host: 127.0.0.1:8000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0
Accept: */*
Accept-Language: pl,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:5173/
content-type: application/json
authorization: Bearer
Content-Length: 354
Origin: http://localhost:5173
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
DNT: 1
Sec-GPC: 1

配置信息 #

环境规格 #

• Ubuntu 23.10 Server
• Nginx
• API通过gunicorn和uvicorn提供服务
• UFW已开放8080端口（API端口）

apollo.config.js #

module.exports = {
  client: {
    service: {
      name: 'docsygen',
      url: 'http://127.0.0.1:8080/graphql/',
      fetchOptions: {
        mode: 'no-cors',
      },
    },
    includes: [
      'src/**/*.vue',
      'src/**/*.js',
    ],
  },
}

main.js #

import {createApp, h, provide} from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router.js";
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core'
import { DefaultApolloClient } from '@vue/apollo-composable'
import {store} from "./vuex/store.js";

const httpLink = createHttpLink({
  uri: 'http://127.0.0.1:8080/graphql/',
  credentials: 'include',
  headers: {
    authorization: `Bearer ${localStorage.getItem('token') || ''}`
  },
  fetchOptions: {
    mode: 'cors',
  },
  fetch: fetch,
  rejectUnauthorized: false,
})

const cache = new InMemoryCache()

const apolloClient = new ApolloClient({
  link: httpLink,
  cache,
})

const app = createApp(
  {
    setup() {
    provide(DefaultApolloClient, apolloClient)
    },
    render: () => h(App),
  }
)

app.use(router).use(store).mount('#app');

CORS配置（FastApi） #

origins = [
    "http://localhost:5173",
    "http://localhost:3000",
    "http://localhost:80",
    "http://localhost",
    "http://localhost:5000",
    "10.0.229.136", // postman
    "http://10.0.129.33" // frontend 
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*", "OPTIONS", "GET", "POST"],
    allow_headers=["*"],
    expose_headers=["*"],
)

Nginx后端配置 #

upstream app_server {
    server unix:/home/sosaymon/delegation-generator/run/gunicorn.sock fail_timeout=0;
}

server {
    listen 8080;

    server_name 10.0.129.33 api.xyz.tech;

    keepalive_timeout 5;
    client_max_body_size 4G;

    access_log /home/sosaymon/delegation-generator/logs/nginx-access.log;
    error_log /home/sosaymon/delegation-generator/logs/nginx-error.log;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;

        if (!-f $request_filename) {
            proxy_pass http://app_server;
            break;
        }
    }
}

补充信息 #

• 开发环境运行正常
• 生产环境服务器响应正常（Postman可返回预期数据）
• 后端已配置CORS中间件
• Nginx已配置请求代理

内容的提问来源于stack exchange，提问作者SoSaymon