文享日志

多源跨域解决方案

网站

发表于2019年02月22日12:46:27

0条评论 27次阅读

我们对项目进行前后端分离时,遇到最大的问题就是解决跨域问题。


什么是跨域问题?
浏览器从一个域名访问另一个域名的资源叫做跨域。协议、端口、域名不同都算作跨域


解决跨域问题的办法有很多,最常见和最简单的方法是JSONP方式和CORS方式。

JSONP不多说了,原理很简单,但是只能用get方式请求。
CORS(跨域资源共享)也非常简单。在服务端设置响应头Access-Control-Allow-Origin字段即可。通常没有安全性要求、不涉及cookie的web应用,可以将Access-Control-Allow-Origin字段设置成*,表明接受任意来源的访问。。但是当涉及到cookie时,则不能将该字段设置成任意来源。只能指明一个源地址,此外还需要设置Access-Control-Allow-Credentials字段,表明允许接受浏览器请求时携带的cookie,前端代码也需要设置withCredentials字段表明携带cookie进行请求。

不涉及cookie的通常写法:

"Access-Control-Allow-Origin": "*"

涉及cookie操作的写法:

"Access-Control-Allow-Credentials": true,"Access-Control-Allow-Origin": "http://192.168.1.223:8080",

错误写法:

"Access-Control-Allow-Credentials": true,"Access-Control-Allow-Origin": "*"


Access-Control-Allow-Origin字段只能设置成一个来源或者是*无穷个来源,设置成一个的话,前端代码只能与后端代码一对一,设置成无穷多的话,不能携带cookie,无法完成注册登录等常见功能。


怎么解决携带cookie,并且允许多个源地址对服务端代码进行访问?
其实很简单,首先我们要了解,服务端怎么知道你是从哪来的,当请求服务端时,请求头中携带了origin字段保存了你来自哪里,那我们在得到该字段之后,再将得到的源地址配置到响应头即可。

示例代码如下:

//允许访问源列表
const allowPass = ["http://blog.docmobile.cn", " 
//设置响应头
app.use(async(ctx, next) => {    
const origin = ctx.request.header.origin;
if (allowPass.indexOf(origin) != -1) {
        ctx.set({           
         "Access-Control-Allow-Credentials": true,
            "Access-Control-Allow-Origin": origin
        });
    } else {
        ctx.set({            
        "Access-Control-Allow-Origin": "*",
        })
    }   
     await next();
});


👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广