解决 Ajax:Ensure CORS response header values are valid 跨域问题

一、报错汇总:

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.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写的,所以直接在liveSeversettings.json中加上
"liveServer.settings.port": 3000
  • 改完端口还是要解决跨域问题,所以不如就直接访问其他接口算啦

2.忘记nodemon app.js
这个没啥好说的,急了是会忘的,回去重新node一下就好

三、个人感悟

  • 前面三件套+node学得太顺了,人一多学着资源就多,问题解决也方便,一到ajax,视频五花八门质量参差不齐,上网搜半天都没能真的解决我问题,之前一直觉得有些学友被pink惯坏了,一报Bug自己不会搜,没有一点自学能力,等到了自己身上因为这么个简单报错,昨天搞了7个钟,最后重新看了个视频换了个写法误打误撞解决了,今天又搞了8个钟,到现在才彻底明白怎么一回事
  • 其实但凡仔细看一眼报错,但凡从一开始就好好理解代码逻辑而不是敷衍式学习,也不会因为这么一个小问题费这么长时间
  • 但结果总归是好的,我终于是解决了这个问题,学这些还是挺上瘾的,当然前提是得能学的懂,一有什么地方实现不了就便秘一样地难受,所以还是一步一步慢慢来吧

你可能感兴趣的:(前端,报错解决,ajax,前端,javascript)