使用 Netlify Dev 彻底解决 CORS 问题

 1function App() {
 2  const [msg, setMsg] = React.useState("click the button")
 3  const handler = () =>
 4    fetch("https://icanhazdadjoke.com/", { headers: { accept: "Accept: application/json" } })
 5      .then((x) => x.json())
 6      .then(({ msg }) => setMsg(msg))
 7
 8  return (
 9    <div className="App">
10      <header className="App-header">
11        <p>message: {msg}</p>
12        <button onClick={handler}> click meeee</button>
13      </header>
14    </div>
15  )
16}

1Access to fetch at 'https://icanhazdadjoke.com/' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field accept is not allowed by Access-Control-Allow-Headers in preflight response.

1$ npm i -g netlify-cli

1# provide a build command and publish folder
2# specific to your project,
3# create a Netlify site instance, and
4# initialize netlify.toml config file if repo connected to git remote
5$ netlify init # or `ntl init`
6
7# start local proxy server
8$ netlify dev # or `ntl dev`

1[build]
2  command = "yarn run build"
3  functions = "functions"
4  publish = "dist"

1$ netlify functions:create

1const handler = () =>
2  fetch("/.netlify/functions/node-fetch", { headers: { accept: "Accept: application/json" } })
3    .then((x) => x.json())
4    .then(({ msg }) => setMsg(msg))

1$ netlify dev # or ntl dev

1message: Why can't a bicycle stand on its own? It's two-tired.

1$ npm run build ## in case you need it
2$ netlify deploy --prod ## this is the manual deploy process

1[build]
2  command = "yarn build && cd functions/node-fetch && yarn"
3  functions = "functions"
4  publish = "dist"