跨域的前后端方法总结

浏览器的同源策略：

1.不能通过ajax或axios的方法去请求不同源的资源

2.浏览器的不同源的框架之间不能进行js的交互操作

实验都是用node.js搭建的本地服务器，这里的不同源都是设置的端口号不同

下载express框架

npm init

npm install express --save

开启本地服务

node server.js

前端跨域

一 window.name跨域

b.html去获取a.html的数据

a.html http://127.0.0.1:8081

b.html http://127.0.0.1:8080

要通过iframe来当中间桥梁

二 window.postMessage跨域

b.html去获取a.html的数据，但是只能在a页面显示

a.html http://127.0.0.1:3001

b.html http://127.0.0.1:3000

适合于不同窗口的iframe之间的跨域

三 document.domain跨域

b.html去获取a.html的数据

a.html http://127.0.0.1:8081

b.html http://127.0.0.1:8080

设置两个页面的document.domain相等，这里是document.domain = 127.0.0.1

后端跨域

一 CORS跨域

a.html http://127.0.0.1:8080

a.html要跨域请求的url：http://127.0.0.1:8081

在8081端口的后端设置允许8080端口跨域的代码

app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Credentials", true)
res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8080")
res.header("Access-Control-Allow-Headers", "X-Requested-With")
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8")
next()
})

二 服务器代理跨域

a.html去请求后端，后端去请求不同源的目的服务器，然后再把请求到的数据传给a.html

a.html http://127.0.0.1:8080

后端要请求的目的服务器：http://127.0.0.1:8081

后端用的axios请求

npm install axios --save

前端小白，若文中有错误的还请指正，虚心接受，继续努力\(^o^)/~，加油\(^o^)/~