一、报错汇总:
1.1跨域问题
xhr.send();
Failed to load resource: the server responded with a status of 404 (Not Found)
1.2 其他问题
1. 文件不存在
`GET http://127.0.0.1:5500/server/ 404 (Not Found)`
POST http://127.0.0.1:5500/server 405 (Method Not Allowed)
2. 忘记nodemon app.js
二、报错分析
2.1 跨域问题
协议、域名、端口三者出现不同时,就报跨域的bug一般计算机默认端口是5500,但是网上教程有教get 3000的,有教get 8000的,端口不同自然就会产生跨域问题原报错代码:
html
//以默认5500端口向http://127.0.0.1:3000/server发送get请求<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><style>#result {width: 200px;height: 100px;border: 1px solid #90b;}</style><body><button>点击发送请求</button><div id="result"></div><script type="text/javascript">const result = document.getElementById('result');// 按钮绑定事件const button = document.getElementsByTagName('button')[0];button.onclick = function () {// console.log('hh')//1、创建对象const xhr = new XMLHttpRequest();// 2、初始化xhr.open('get', 'http://127.0.0.1:3000/server');// 3、发送xhr.send();// 4、事件绑定,处理服务器端返回的结果xhr.onreadystatechange = function () {</script></body></html>
app.js
// 引入express框架const express = require('express');// 创建web服务器const app = express();const request = require('request')//1 在后面加上app.allapp.all("*", function (req, res) {//此时的 '*' 指用来处理所有的请求,从而在服务器端解决跨域的问题;res.header('Access-Control-Allow-Origin', 'http://127.0.0.1:3000'); //此时表示:允许 'http://127.0.0.1:5500' 地址来访问服务器; res.header('Access-Control-Allow-Methods', 'GET,POST,PUT'); //此时表示:允许发的请求方式,如:'GET,POST,PUT';res.header('Access-Control-Allow-Headers', 'Content-Type'); //此时表示:允许发的请求头,如:'Content-Type' 请求头的类型;req.next(); //请求回来,并进行下一步的操作;});//2 或者简单在get路由里加一句代码app.get('/server', (req, res) => {res.setHeader('Access-Control-Allow-Origin','*'); res.send('Hello Express');});
2.2 其他问题
1. 文件不存在
这个可能是只有我会遇到的问题,真的笨,一开始一直想get5500端口下的server,但因为端口同源,会检测文件夹是否存在,不存在则报错,我也不知道老师为啥演示就一直可以,其实合理应该同源确实可以访问的,但当时我一整个迷茫状态,看到404就以为是代码写错了,后面仔细看看报错就可以发现报错说的是该文件夹not found
GET http://127.0.0.1:5500/server/ 404 (Not Found)
可以试着gethttp://127.0.0.1:5500
,你就会看到你这个代码窗口运行文件夹的文件所以直接改个端口,再用上面的跨域方法解决就行了如果就一定要用5500这个端口,那就在网上搜改端口的方法,我是用vscode写的,所以直接在liveSever
的settings.json
中加上
"liveServer.settings.port": 3000
改完端口还是要解决跨域问题,所以不如就直接访问其他接口算啦
2.忘记nodemon app.js
这个没啥好说的,急了是会忘的,回去重新node一下就好