错误:CORS 错误:请求的资源 SvelteKit 上没有 ‘Access-Control-Allow-Origin’ 标头。

huangapple go评论72阅读模式
英文:

Error: CORS error: No 'Access-Control-Allow-Origin' header is present on the requested resource SvelteKit

问题

我有2个文件夹,一个叫做"backEnd",另一个是"frontEnd"

结构:

|-backEnd
|--app.js
|-frontEnd
|--src
|---routes
|---- +page.svelte
|---- +page.js

在backEnd中,我使用了Node.js和Express,以下是代码:

let express = require("express")
let app = express()
let PORT = process.env.PORT || 3000

app.get("/api", (req, res) => {
    res.json({message: "Hello World"})
})

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`)
})

在frontEnd中,我使用了SvelteKit和Vite,以下是"+page.js"中的代码:

export let load = async ({ fetch }) => {
    let rawRes = await fetch("http://localhost:3000/api/")
    let data = await rawRes.json()

    return {data: data}
}

以及"page.svelte"中的代码:

<script>
    export let data
    console.log(data)
</script>
<div>
    Hello
</div>

当我运行"npm run dev"时,我收到以下错误信息:"Error: CORS error: No 'Access-Control-Allow-Origin' header is present on the requested resource"。

如何修复这个问题?

英文:

I have 2 folder, one called "backEnd" and another is "frontEnd"

structure:

|-backEnd
|--app.js
|-frontEnd
|--src
|---routes
|---- +page.svelte
|---- +page.js

backEnd I use nodejs with express, here is the code

let express = require(&quot;express&quot;)
let app = express()
let PORT = process.env.PORT || 3000


app.get(&quot;/api&quot;, (req, res) =&gt; {
    res.json({message: &quot;Hello World&quot;})
})


app.listen(PORT, () =&gt; {
    console.log(`Server is running on port ${PORT}`)
})

The frontEnd I use sveltekit with vite
Here is the code in "+page.js"

export let load = async ({ fetch }) =&gt; {
    let rawRes = await fetch(&quot;http://localhost:3000/api/&quot;)
    let data = await rawRes.json()

    return {data: data}
}

And here is the code in "page.svelte"

&lt;script&gt;
    export let data
    console.log(data)
&lt;/script&gt;
&lt;div&gt;
    Hello
&lt;/div&gt;

When I run "npm run dev" I get the error
"Error: CORS error: No 'Access-Control-Allow-Origin' header is present on the requested resource"

How can I fix this

答案1

得分: 0

使用cors中间件来为服务器启用CORS

例如:

let express = require("express")
let cors = require('cors')
let app = express()
let PORT = process.env.PORT || 3000

app.use(cors())

app.get("/api", (req, res) => {
    res.json({message: "Hello World"})
})

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`)
})
英文:

Use cors middleware to enable CORS for the server.

E.g.

let express = require(&quot;express&quot;)
let cors = require(&#39;cors&#39;)
let app = express()
let PORT = process.env.PORT || 3000

app.use(cors())

app.get(&quot;/api&quot;, (req, res) =&gt; {
    res.json({message: &quot;Hello World&quot;})
})


app.listen(PORT, () =&gt; {
    console.log(`Server is running on port ${PORT}`)
})

huangapple
  • 本文由 发表于 2023年6月18日 22:21:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/76501009.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定