解决 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写的，所以直接在liveSever的settings.json中加上

"liveServer.settings.port": 3000

改完端口还是要解决跨域问题，所以不如就直接访问其他接口算啦

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

三、个人感悟

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

解决 Ajax：Ensure CORS response header values are valid 跨域问题相关推荐

H5项目中通过iframe引入语音导览解决微信jsapi关于同一级域名二级域名跨域问题解决方案
H5项目中通过iframe引入语音导览解决微信jsapi关于同一级域名二级域名跨域问题解决方案在项目的入口文件App.js中 <iframe src="https://www.abc ...
SAP UI5 初学者教程之二十五 - 使用代理服务器解决 SAP UI5 应用访问远端 OData 服务的跨域问题试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
ajax上送src,使用script的src实现跨域和类似ajax效果
场景假如有两个域名不同的服务器, a.com和b.com,在b.com/b_return_js.PHP这个接口里, 可以获取一些数据. 当然,假如是b.com的页面里, 可以使用ajax,直接请求这 ...
跨域的另一种解决方案——CORS（Cross-Origin Resource Sharing）跨域资源共享
跨域的另一种解决方案--CORS(Cross-Origin Resource Sharing)跨域资源共享参考文章: (1)跨域的另一种解决方案--CORS(Cross-Origin Resourc ...
解决firefox和IE9对icon font字体的跨域访问问题
解决firefox和IE9对icon font字体的跨域访问问题参考文章: (1)解决firefox和IE9对icon font字体的跨域访问问题 (2)https://www.cnblogs.co ...
Nginx完美解决前后端分离端口号不同导致的跨域问题
Nginx完美解决前后端分离端口号不同导致的跨域问题参考文章: (1)Nginx完美解决前后端分离端口号不同导致的跨域问题 (2)https://www.cnblogs.com/PyKK2019/p ...
Ajax入门笔记（原生Ajax、jQuery、axios、fetch、跨域SONP、CORS）
文章目录一.基础知识 1.1AJAX简介 1.2 AJAX的特点 1.2.1 AJAX 的优点 1.2.2 AJAX 的缺点 1.3 XML简介 1.4 HTTP简介 1.4.1 请求报文 1.4. ...
Ajax（jQuery封装），表单form提交（Ajax），art-template模板引擎，原生Ajax，XML和JSON，axios，跨域和JSONP，防抖和节流，HTTP协议
目录服务器基本概念 1.URL 2.URL地址的组成部分 3. 图解客户端与服务器的通信过程 4.网页中如何请求数据 5.资源的请求方式 Ajax jQuery中的Ajax 1. $.get()函数 ...
用Dojo实现Ajax请求：XH“.NET研究”R、跨域、及其他
在任何浏览器上方便地实现Ajax请求是每一个Ajax框架的初衷.Dojo在这方面无疑提供了非常丰富的支持.除了XMLHttpRequest之外,动态script.iframe.RPC也应有尽有,并且接 ...

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

一、报错汇总：

1.1跨域问题

1.2 其他问题

二、报错分析

2.1 跨域问题

2.2 其他问题

三、个人感悟

解决 Ajax：Ensure CORS response header values are valid 跨域问题相关推荐

最新文章

热门文章