【发布时间】：2021-12-31 22:05:45
【问题描述】：
我正在尝试使用 fetch 发出发布请求。通常当我使用npm start 启动我的服务器时，它工作得很好。但是使用 webpack 开发服务器它给了我这个错误：
这是我的服务器端代码：
require('dotenv').config();
const mockAPIResponse = require('./mockAPI.js')
const PORT = 8081
const apiKey = process.env.API_KEY
const baseUrl = 'https://api.meaningcloud.com/sentiment-2.1'
const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
const fetch = require('node-fetch')
var path = require('path')
const app = express();
app.use(cors())
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(express.static('dist'))
app.get('/', function(req, res) {
res.sendFile('dist/index.html')
//res.sendFile(path.resolve('src/client/views/index.html'))
})
app.post('/api', async(req, res) => {
console.log("you key is", apiKey)
const enteredUrl = req.body.url;
const apiUrl = baseUrl + '?key=' + apiKey + '&url=' + enteredUrl + '&lang=en'
console.log(apiUrl)
const response = await fetch(apiUrl)
try {
const fetchedData = await response.json()
console.log(fetchedData)
res.send(fetchedData)
} catch (error) {
console.log("error", error)
}
})
app.get('/test', function(req, res) {
res.send(mockAPIResponse)
})
// designates what port the app will listen to for incoming requests
app.listen(PORT, (error) => {
if (error) throw new Error(error)
console.log(`Server listening on port ${PORT}!`)
})
我的 package.json：
{
"name": "evaluate-news-nlp",
"version": "0.0.1",
"main": "index.js",
"scripts": {
"test": "jest",
"start": "nodemon src/server/index.js",
"build-prod": "webpack --config webpack.prod.js",
"build-dev": "webpack-dev-server --config webpack.dev.js --open"
},
"keywords": [],
"author": "Alaa",
"description": "",
"dependencies": {
"2": "^3.0.0",
"@babel/runtime": "^7.16.7",
"axios": "^0.21.1",
"babel-polyfill": "^6.26.0",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"dotenv": "^8.6.0",
"express": "^4.17.1",
"node-fetch": "^2.6.1",
"sass": "^1.45.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.5"
},
"devDependencies": {
"@babel/core": "^7.5.4",
"@babel/plugin-transform-runtime": "^7.16.7",
"@babel/preset-env": "^7.5.4",
"@types/jest": "^26.0.20",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.1.2",
"file-loader": "^6.1.1",
"html-webpack-plugin": "^3.2.0",
"jest": "^26.5.3",
"mini-css-extract-plugin": "^0.9.0",
"nodemon": "^2.0.7",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"prettier": "^2.2.1",
"sass": "^1.45.2",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"supertest": "6.1.3",
"terser-webpack-plugin": "^1.4.5",
"webpack-dev-server": "^3.7.2",
"workbox-webpack-plugin": "^6.1.1"
}
}
Webpack 开发服务器工作正常，直到我尝试发出发布请求。我尝试了不同版本的 webpacks、webpack 开发服务器、node-fetch，但仍然遇到相同的错误。 我该如何解决这个错误？
编辑：我认为问题与 webpack 开发服务器在端口 8080 上运行而我的快速服务器在 8081 上运行这一事实有关。当我检查网络选项卡的请求时，显示如下：
编辑：我能够通过运行 webpack dev server 然后打开另一个终端并运行 npm start 来启动我的 express 服务器来解决问题。这是它应该如何正常工作的方式吗？因为我所遵循的教程仅适用于 webpack 开发服务器
【问题讨论】：
-
请发布您的
package.json文件 -
Node 中的服务器代码不受 webpack 服务器的直接影响。检查网络选项卡，看看是否有关于请求错误的更多详细信息。 CORS 可能存在问题。你的前端也在 8081 上吗？
-
@Lucas 我认为 CORS 运行良好，因为没有 webpack 开发服务器，一切运行良好。错误发生后，我为网络选项卡添加了屏幕截图。请看一看。问题可能是 webpack 在端口 8080 上运行，但我的 express 服务器在 8081 上运行？
-
是的。这就是我所指的。查看 Network 选项卡中的 Payload/Preview/Response 子选项卡进行确认。您可能需要手动允许来自不同来源的请求
-
哦，阅读您的编辑后，问题只是您没有运行快速服务器吗？如果你愿意，你可以让它成为 npm 脚本的一部分来同时运行
标签： javascript node.js webpack fetch webpack-dev-server