Ajax使用Access-Control-Allow-Origin头实现跨域访问

跨域在开发中是一个比较常见的问题,虽然有json或者xml来解决,现在html5开始流行了,可以通过Access-Control-Allow-Origin解决跨域问题。

问题

在未加入header前:

TIM截图20170801125750.png

解决方案

使用Access-Control-Allow-Origin头部

参考代码如下:

location ~* \.(eot|otf|ttf|woff|woff2)$
    {
        if ($request_method = 'OPTIONS') 
        {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        if ($request_method = 'POST')
        {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        }
        if ($request_method = 'GET')
        {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        }
    }

如果仍然不行,将所有的add_header 'Access-Control-Allow-Origin' '*';改为add_header 'Access-Control-Allow-Origin' '<你的域名>';即可解决。

本文距离最后一次更新已超过180天,部分内容可能会随着时间的推移变更或失效。

相关文章

此处无声胜有声