Repository: next.js
Issue: [NEXT-1245] Bug: access-control-allow-origin changed to '*' automatically
Labels: bug

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.13.0
      npm: 8.1.0
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 13.3.2-canary.2
      eslint-config-next: 13.3.1
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.3.2-canary.2", newest: "13.3.2-canary.3".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

=> I used 13.3.2-canary.2 because 13.3.2-canary.3 shows
`Couldn't find any versions for "@next/swc-win32-ia32-msvc" that matches "13.3.2-canary.3"`
```


### Which area(s) of Next.js are affected? (leave empty if unsure)

_No response_

### Link to the code that reproduces this issue

https://github.com/miriyas/miriya-server

### To Reproduce

1. next.config.js with custom headers

```
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  env: {
  },
  async headers() {
    return [
      {
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Allow-Origin', value: process.env.ALLOW_ORIGIN },
          {
            key: 'Access-Control-Allow-Methods',
            value: 'GET, OPTIONS, PATCH, DELETE, POST, PUT',
          },
          {
            key: 'Access-Control-Allow-Headers',
            value:
              'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;
```


2. two api routes. first one with only GET, second one with GET, PATCH
3. deploy to production
4. see CORS errors

### Describe the Bug

There is 2 APIs.

```
GET /api/idols/data
GET /api/idols/years
```

<img width="430" alt="image" src="https://user-images.githubusercontent.com/1982486/234105030-ecb2f900-4cbe-4314-82cb-72e4a2693c49.png">

<img width="580" alt="image" src="https://user-images.githubusercontent.com/1982486/234105185-0e6c7d38-ec71-4a48-8e70-831e70edd5c9.png">

And my next.config.js is...

<img width="621" alt="image" src="https://user-images.githubusercontent.com/1982486/234106849-893130d3-2fc9-4dd6-b09e-a818574d76d2.png">

Focus on this line.

```
{ key: 'Access-Control-Allow-Origin', value: process.env.ALLOW_ORIGIN },
```

It is very weired, because GET /api/idols/data is fine,

but GET /api/idols/years shows CORS error.

I changed process.env.ALLOW_ORIGIN to 'random something', but it is not relevent to this error.

```
Access to XMLHttpRequest at 'https://miriya-server.vercel.app/api/idols/years' from origin 'https://miriya.vercel.app' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
```


<img width="897" alt="스크린샷 2023-04-25 오전 4 50 13" src="https://user-images.githubusercontent.com/1982486/234104937-af43f1f4-baac-4468-a416-b60f116a359e.png">

<img width="879" alt="스크린샷 2023-04-25 오전 4 50 20" src="https://user-images.githubusercontent.com/1982486/234104944-6b0ac4ca-f560-4287-85e1-64f84796da2e.png">

When local, it was fine.

But at production, access-control-allow-origin turned into '*', then makes CORS error.

So I added meaningless patch request like 

```
export const PATCH = async () => {
  return NextResponse.json({ ok: true });
};
```

then, access-control-allow-origin shows normally.


<img width="470" alt="image" src="https://user-images.githubusercontent.com/1982486/234107291-746adf97-e0ab-411c-bca2-7da0c625ca9d.png">


### Expected Behavior

Next.js production deploy should not change `access-control-allow-origin` to '*'



### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

Vercel

<sub>[NEXT-1245](https://linear.app/vercel/issue/NEXT-1245/bug-access-control-allow-origin-changed-to-automatically)</sub>