前言

不少细心的朋友应该都发现了，我在调用外部资源的时候，都将外部资源放到js.xrbk.cn这个子域名下,这样不仅可以避免因内容较大而出现构建时间增加的问题，而且还能添加防盗链等措施防止他人调用。

教程

首先就是Nginx解决跨域问题，相信不少人已经看到过其他不少文章，但还是要重复一下，那就是将如下代码添加到nginx配置文件中：

location / {
    # 允许所有来源的跨域请求，生产环境建议指定具体域名
    add_header 'Access-Control-Allow-Origin' '*';
    
    # 允许的请求方法
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
    
    # 允许的请求头
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    
    # 允许浏览器读取的响应头
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    
    # 预检请求的缓存时间，单位秒
    add_header 'Access-Control-Max-Age' 1728000;
    
    # 处理预检请求
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

添加完以后，重启一下nginx服务即可。

那Edgeone如何防盗链以及解决CORS跨域呢？很简单，就是配置下规则引擎。

在最上面选择HOST，值为你的域名。

下面添加操作，修改HTTP响应头,类型为增加,参数为Access-Control-Allow-Origin，值为*。

接着就是选择添加IF2，匹配类型为HTTP请求头，头部名称为Referer，运算符为正则不匹配，值为^https://[a-zA-Z0-9-]*\.xrbk\.cn(/.*)?$，操作为HTTP应答，响应码可以自己填写，响应页面就自己设置一个页面就行。

最后保存并发布就行了。

君子喻以义,小人喻以利