vue.js 我如何使用Ngrok为我的后端和前端和数据库连接?

14ifxucb  于 2023-06-24  发布在  Vue.js
关注(0)|答案(1)|浏览(170)

我正在尝试连接数据库、服务器和前端。我使用Express作为服务器,Vue作为前端。但是,当我尝试发出GET请求时,它会导致错误:

Access to XMLHttpRequest at 'https://8416-xxx-xxx-xx-xx.ngrok-free.app/get_data' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我正在寻求关于这个问题的帮助。

zhte4eai

zhte4eai1#

CORS错误可能发生在前端从一个域(比如example1.com)提供服务,并且试图向另一个域(比如example2.com)中的后端发出HTTP请求时。
在您的示例中,后端位于https://8416-xxx-xxx-xx-xx.ngrok-free.app,但似乎是从不同的URL访问前端。
有两种方法可以解决这个问题:
1.从同一个域为前端和后端提供服务
1.配置服务器以响应正确的CORS头,这将告诉浏览器允许跨源(跨域)请求。
这是你可以做的2。使用express.js(参见https://expressjs.com/en/resources/middleware/cors.html):

npm install cors

现在配置应用程序以使用cors:

var express = require('express')
var cors = require('cors')
var app = express()

var corsOptions = {
  origin: 'http://domainofyourfrontend.com',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}

app.get('/get_data', cors(corsOptions), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for only http://domainofyourfrontend.com'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

相关问题