记一次解决node跨域问题

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的一种安全限制，可防止一些网站受到直接的网络攻击。
所谓同源是指：域名，协议，端口均相同，但只要有一个不同，就是跨域。

当出现跨域问题时，需要在node.js（我这里的文件名为server.js）代码中的响应头部分添加解决跨域问题的代码。
具体解决代码如下：
//设置响应头 设置为允许跨域 response.setHeader('Access-Control-Allow-Origin','*'); //解决node跨域问题需要再加上以下代码 response.setHeader('Access-Control-Allow-Headers','X-Request-With'); response.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); response.setHeader("X-Powered-By",' 3.2.1'); response.setHeader("Content-Type", "text/html");

文件 1-GET.html 代码：
`

点击发送请求

<script>
    //获取button元素
    const btn = document.getElementsByTagName('button')[0];
    //绑定事件
    btn.onclick = function(){
        // console.log('test');
        //1、创建对象
        const xhr = new XMLHttpRequest();
        //2、初始化 设置请求方法 和url
        xhr.open('GET','http://127.0.0.1:8000/server');
        //3、发送
        //涉及跨域问题
        xhr.send();
        //4、事件绑定，处理服务端返回结果
        //readystate 是xhr对象中的属性， 0,1,2,3,4
        xhr.onreadystatechange = function(){
            //判断
            if(xhr.readyState == 4){
                //判断响应码 200 404 403 401 500
                //2xx 成功
                if(xhr.status >= 200 && xhr.status < 300){
                    //处理结果 行 头 空行 体
                    //1、响应头
                    console.log(xhr.status);//状态码
                    console.log(xhr.statusText);//状态字符串
                    console.log(xhr.getAllResponseHeaders());//所有响应头
                    console.log(xhr.response);//响应体
                }else{
                    console.log('出错了');
                }
            }
            console.log('test');
        }
    }
</script>

`

--

文件 server.js 代码：
`//1、引入express
const { request, response } = require('express');
const express = require('express');

//2、创建应用对象
const app = express();

//3、创建路由规则
app.get('/server',(request,response)=>{
//设置响应头 设置为允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//解决node跨域问题加的
response.setHeader('Access-Control-Allow-Headers','X-Request-With');
response.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
response.setHeader("X-Powered-By",' 3.2.1');
response.setHeader("Content-Type", "text/html");

//设置响应体
response.send('hello ajax');

});

//4、监听端口启动服务
//启动命令在相关目录下打开终端，用node+文件名字
app.listen(8000,()=>{
console.log("服务已经启动，8000端口正在监听中......");
});`

--

更好的参考链接：https://blog.csdn.net/lianzhang861/article/details/84871369