解决 Ajax：Ensure CORS response header values are valid 跨域问题
解决原生Ajax跨域问题和其他笨笨问题
·
一、报错汇总：
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 跨域问题
原报错代码：
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.all
app.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) - 可以试着get
http://127.0.0.1:5500，你就会看到你这个代码窗口运行文件夹的文件 - 所以直接改个端口，再用上面的跨域方法解决就行了
- 如果就一定要用5500这个端口，那就在网上搜改端口的方法，我是用vscode写的，所以直接在
liveSever的settings.json中加上
"liveServer.settings.port": 3000
- 改完端口还是要解决跨域问题，所以不如就直接访问其他接口算啦
2.忘记nodemon app.js
这个没啥好说的，急了是会忘的，回去重新node一下就好
三、个人感悟
- 前面三件套＋node学得太顺了，人一多学着资源就多，问题解决也方便，一到ajax，视频五花八门质量参差不齐，上网搜半天都没能真的解决我问题，之前一直觉得有些学友被pink惯坏了，一报Bug自己不会搜，没有一点自学能力，等到了自己身上因为这么个简单报错，昨天搞了7个钟，最后重新看了个视频换了个写法误打误撞解决了，今天又搞了8个钟，到现在才彻底明白怎么一回事
- 其实但凡仔细看一眼报错，但凡从一开始就好好理解代码逻辑而不是敷衍式学习，也不会因为这么一个小问题费这么长时间
- 但结果总归是好的，我终于是解决了这个问题，学这些还是挺上瘾的，当然前提是得能学的懂，一有什么地方实现不了就便秘一样地难受，所以还是一步一步慢慢来吧
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)