CORS error with mattermost-redux Client4 and React app

Developer Discussion
#1

I’m trying to use the mattermost-redux Client4 API in a basic React app to interact with a Mattermost server located elsewhere. My code looks something like this:

import { Client4 } from "mattermost-redux/client"
...
Client4.setUrl('https://myserver.com');
...
await Client4.login(username, password);

The result is this error:

Access to fetch at 'https://myserver.com/api/v4/users/login' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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'.

I’ve used the Mattermost System Console to set Enable cross-origin requests from: to * but no luck.

However, when I add the following to the index.html file for my React app:

  fetch('https://myserver.com/api/v4/users/login', {
    method: "POST",
    body: JSON.stringify({login_id:"myusername", "password":"mypassword"})
  })
  ...

…it works fine. No errors, and I get back readable JSON about my user account.

What am I missing?

#2

Addendum: I thought perhaps I’d just go with the fetch() approach for now, but am now stuck because I can’t get the Token response header that comes back from the login call. No amount of fiddling with the CORS settings has helped…so I’m stuck again.

#3

@grundleborg Would someone on the dev team be familiar with this issue?

#4

OK, progress:

The big key here was recognizing that saving the CORS settings in the System Console didn’t actually lock them in—I had to SSH into the server and manually restart it. (Is there any way to do that from the System Console GUI?)

From there I was able to log in successfully using both fetch() and Client4. With Client4 I’m still stuck because a subsequent getMe() call fails with error, Invalid or expired session, please login again. Is it possible the token isn’t getting stored after the login call? I don’t see anything in the code to suggest it is.

Here are the CORS settings that have enabled the above progress:

  • Enable cross-origin requests from: * or my actual server http://localhost:3000
  • CORS Exposed Headers: Token
  • CORS Allow Credentials: true
  • CORS Debug: true but probably doesn’t matter