跨域1.跨域同源策略：协议、域名、端口相同。跨域：协议、域名、端口相同存在一个或多个不同，产生跨域，跨域的本质是浏览

1.跨域

同源策略：协议、域名、端口相同。
跨域：协议、域名、端口相同存在一个或多个不同，产生跨域，跨域的本质是浏览器的行为。(前后端分离和多端。)

2.搭建前后端
模拟跨域

创建文件夹demo (安装node环境，进入文件夹下（cmd、git、vscode）)

文件目录

1)安装webpack、webpack-cli
npm install -S webpack webpack-cli
2)手动创建webpack.config.js

执行：npm install html-webpack-plugin

3)修改package.json
添加scripts
"scripts": {
"dev": "webpack-dev-server --mode development"
},

执行：npm install webpack-dev-server

4)搭建模拟后端服务
创建server.js

安装express: npm install express

5)在index.js中发送请求

6）
启动前端：npm run dev --->http://localhost:8080

出现跨域问题

启动后端：node server.js --->http://localhost:3001

3.解决跨域

1）webpack proxy(只适用于开发)
在webpack.config.js
// webpack proxy仅适用于开发环境
devServer: {
proxy: { //代理
"/api": {
target: "http://localhost:3001", pathRewrite: {
"/api": ""
}
}
}
},

index.js
修改：
xhr.open("get", "/api/user", true);

重启服务：

2）Cors
在server.js
//第二种：cors
var allowCrosDomin = function(req,res,next){
//请求源 ajax http://localhost:8080 res.header("Access-Control-Allow-Origin"," ");
//请求头 x-token
res.header("Access-Control-Allow-Headers", " ")
//请求方法 get post put delete
res.header("Access-Control-Allow-Methods", "*")

next();
}
app.use(allowCrosDomin);