跨域说的太多了,这里不再解释,浏览器web的同源策略造成的,目前跨域前端和后端都是可以解决的,今天主要说后端常用的解决办法
CORS:W3C的标准技术,主要全称是Cross-Origin Resource Sharing,中文叫跨域资源共享技术,官网:'https://www.w3.org/TR/cors/',如果你要看这个官网的解释,可以看看下面的这个,简单解释就是当代浏览器会将跨站点异步访问的权限交给CORS来处理解决跨域问题,通常有两种设置方式,本文案例以node为例子,上代码
方式一:直接使用npm里面的cors包,简单粗暴.
**安装包 npm install cors -S**
const app=express();//基于node里面的express服务器
//我这边使用了中间件
var cors=require("cors");
app.use(cors());
//后面的代码会引入我后端的接口,类似于一个react.js,通过express路由引入后,服务端接口配置完毕,此方式太暴力,解决了所有请求头和方式设置的繁琐问题,缺点如何要携带cookie这种方式显然不适合
方式二:也是基于express中间件设置,只不过会设置具体请求头,请求方式,可以携带Cookie.
const express = require('express')
const app = express();
app.use((req, res, next) => {
//判断路径
if(req.path !== '/' && !req.path.includes('.')){
res.set({
'Access-Control-Allow-Credentials': true, //允许后端发送cookie
'Access-Control-Allow-Origin': req.headers.origin || '*', //任意域名都可以访问,或者基于我请求头里面的域
'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type', //设置请求头格式和类型
'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',//允许支持的请求方式
'Content-Type': 'application/json; charset=utf-8'//默认与允许的文本格式json和编码格式
})
}
req.method === 'OPTIONS' ? res.status(204).end() : next()
})
补充一点OPTIONS:OPTIONS方法是用于请求获得由Request-URI标识的资源在请求/响应的通信过程中可以使用的功能选项。通过这个方法,客户端可以在采取具体资源请求之前,决定对该资源采取何种必要措施,或者了解服务器的性能,我们常见的请求就是get或者post,那么哪里查看options请求,看图:
至于后端是Java或者php,也是一样可以用这种方式设置的,只是写法不同
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。