# Announcing MCP Authentication: secure your MCP servers with PropelAuth

If you’ve written any frontend code, you’ve likely encountered a CORS error before, like this:

**Access to \_ has been blocked by CORS policy**

Cross-Origin Resource Sharing (CORS) is a protocol that defines how web requests should be handled when they are across different URLs.

### Why are cross origin requests an issue?

Your browser holds a lot of state about you for every website you visit. Let’s say you are logged in to **mybank.com** and you have a cookie set with **mybank.com** indicating that you are logged in.

While you are browsing, you accidentally visit **malicious.site**, which makes a request to **mybank.com** that looks like this:

```javascript
// Fetch request made from https://malicious.site
fetch("https://api.mybank.com/account_details", {
    method: "GET",
    credentials: "include",
})
```

If this request was allowed and your cookie was included, the owner of **malicious.site** would be able to make requests on your behalf and read your account details.

With CORS, the server is allowed to specify which cross-origin requests it will accept vs reject. It can reject requests that need cookies. It can reject requests from **untrusted.mybank.com** but accept requests from **app.mybank.com**. It can reject all POST requests but allow GETs and PUTs.

The important thing to note about CORS is that the configuration/settings are done on the **server** and enforced by both the server and your browser. Most server frameworks have a library for configuring your CORS headers, but if you want to see the underlying headers themselves, [here’s](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS?ref=propelauth.mymidnight.blog) a good resource.

### Practical example

Let’s say we have a React application with an Express backend. Our frontend is running on port 3000 - a common default for React.

Since our backend cannot also run on port 3000 locally, we’ll setup Express to run on port 4000.

```javascript
const express = require('express')
const app = express()
const port = 4000

app.get('/whoami', (req, res) => {
    res.send('Who is anybody?')
})

app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})
```

If our React application made a fetch request to our backend like this:

```javascript
// Fetch request made from http://127.0.0.1:3000
fetch("http://127.0.0.1:4000/whoami")
```

we should expect a CORS error. Just like our earlier example, 127.0.0.1: **3000** and 127.0.0.1: **4000** are treated as two separate domains, so you cannot make requests across them yet. Let’s look at a few ways to fix this.

### Fix 1: Fixing the server

One approach is to fix our server. We can do this by installing a CORS library ([https://www.npmjs.com/package/cors](https://www.npmjs.com/package/cors?ref=propelauth.mymidnight.blog)) and telling the server to expect requests from 127.0.0.1:3000

```javascript
app.use(cors({
    origin: 'http://127.0.0.1:3000',
}))
```

Our requests will now succeed. This approach is pretty straightforward and is generally good practice. We can use this same approach in production in case our frontend and backend are hosted on two different subdomains.

### Fix 2: Adding a proxy

In production, in some cases, you’ll host your frontend and backend from the same origin. In these cases, you usually want to write fetch code that looks like this:

```javascript
fetch("/whoami")
```

instead of like this:

```javascript
const url;
if (process.env.NODE_ENV === "production") {
    url = "https://www.example.com/whoami"
} else {
    url = "http://127.0.0.1:4000/whoami"
}
fetch(url)
```

To do this, **create-react-app** actually comes natively with the ability to set up a [simple proxy](https://create-react-app.dev/docs/proxying-api-requests-in-development/?ref=propelauth.mymidnight.blog). Add the following to your package.json:

```javascript
"proxy": "http://localhost:4000",
```

Then, any request that looks like an API request (e.g. has a content type application/json) will automatically get forwarded to **http://localhost:4000**.

The reason this bypasses CORS issues is because, to the browser, the request _is_ going to **http://localhost:3000** and therefore doesn’t look like a cross-origin request. The server at **http://localhost:3000** does forward the request to **http://localhost:4000**, but the browser doesn’t know that.

If you are using **Next.js** instead of **create-react-app,** you can set up a redirect in your **next.config.js** which will forward all matching traffic:

```javascript
module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:4000/:path*'
      }
    ]
  }
}
```

### Summary

The simplest way to fix any CORS issues in React and Next.js is actually not to change anything in React or Next.js but instead to fix your server to allow requests from them.

If you cannot change the server, both React and Next.js have ways for you to turn them into proxies and proxy requests to your backend on your behalf. This avoids any CORS issues by making your browser think the request is not a cross-origin request anymore.