WordPress Application Password CORS error when Headless WordPress URL and Site URL are different

[archoda]

I'm working on a headless websites locally. The WordPress ( Back-end ) Url and the Site ( Front-end ) are different...

Ex:
Back-end url: ​http://wordpress.local
Front-end url: ​http://mysite.local

When I go to my main admin user, and try and generate a password, the UI shows a slim red/error bar & metabox under the 'Add New Application Password' ui field, w/ no text. There's also no PHP error logs. However, in the devtools issues panel, i am seeing a CORS error. Instead of WordPress calling ​http://wordpress.local/wp-json/wp/v2 rest endpoint to generate the password, it's wrongfully trying to call the front-end ​http://mysite.local instead.

[archoda]

The screenshot shows the devtoolbar issue panel highlighting this bugs' CORS ERROR that's preventing a headless WP installation from properly generating a new Application Password

[dd32]

Hi @archoda and welcome to trac.

This sounds correct-ish.

wp-json is a front-end rest-api route, which in your case is hosted on http://mysite.local.

WordPress should send the correct access-control-allow-origin header for both the front-end and admin-url.

I believe the issue at hand here may be that CORS is not able to be used on the hostname you're using, I know that Chrome doesn't allow localhost, but I'm not sure what it does with .local hostnames.

The screenshot provided showing Invalid Value to me suggests that it's rejecting the header provided.

Can you supply the Request & Response headers instead?

[archoda]

My clients' website is headless. It's running SvelteKit in SSR on a Netlify/Nodejs stack and WordPress on a yet to be determined host. That's the reason for the CORS/Origin issue. My current development environment MAMP/Back-end, Vite/Front-end, so, there is never a mysite.local/wp-json route. There would only every be a content.mysite.local/wp-json ( pointing to the WordPress host ).

This is where my Application Password comes in. I'm using it to fetch/auth the calls for private content like previews and custom post data/.etc...from Sveltekit ( mysite.local ) to WordPress ( content.mysite.local ).

Sorry if I confused at all on my original post. Hope this clears it up.