Nginx 设置跨域访问

简介: 什么是跨域访问,当我们通过浏览器访问a网站时,同事会利用到ajax或其他方式,同时也请求b网站,这样的话就出现了请求一个页面,使用了两个域名,这种方式对浏览器来说默认是禁止的。

一、跨域访问


什么是跨域访问,当我们通过浏览器访问a网站时,同事会利用到ajax或其他方式,同时也请求b网站,这样的话就出现了请求一个页面,使用了两个域名,这种方式对浏览器来说默认是禁止的。


二、设置跨域访问


1.ngx_http_headers_module模块语法
Syntax: add_header name value [always];
Default:    —
Context:    http, server, location, if in location
COPY
2.nginx配置示例
location ~* \.html$ {
    add_header Access-Control-Allow-Origin *;  # *指允许所有,也可指定,例如:http://10.0.0.56
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
}


三、模拟跨域访问


1.配置被跨域的网站


配置nginx


[root@web02 conf.d]# vim beikuayu.conf
server {
    listen 80;
    server_name localhost;
    location / {
        root /code;
        index index.html;
    }
}


保存后,重启nginx生效。


配置页面 [root@web02 ~]# echo "


我是被跨域网站


" > /code/index.html


2.配置跨域网站


配置nginx


[root@web01 conf.d]# vim kuayu.conf
server {
    listen 80;
    server_name localhost;
    location / {
        root /code/kuayu;
        index index.html;
    }
}


配置页面


[root@web01 ~]# mkdir /code/kuayu
[root@web01 ~]# vim /code/kuayu/index.html
<html lang="en">
<head>
        <meta charset="UTF-8" />
        <title>测试ajax和跨域访问</title>
        <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
        $.ajax({
        type: "GET",
        url: "http://10.0.0.57",
        success: function(data) {
                alert("successful! 跨域成功!");
        },
        error: function() {
                alert("fail! 跨域失败!");
        }
        });
});
</script>
        <body>
                <h1>测试跨域访问</h1>
        </body>
</html>


保存后,重启nginx生效。


3.配置允许跨域访问


[root@web02 conf.d]# vim beikuayu.conf
server {
    listen 80;
    server_name localhost;
    root /code;
    index index.html;
    location ~* \.html$ {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
    }
}


4.Web页面展示


image.png

目录
打赏
0
0
0
0
1
分享
相关文章
nginx安装部署ssl证书,同时支持http与https方式访问
为了使HTTP服务支持HTTPS访问,需生成并安装SSL证书,并确保Nginx支持SSL模块。首先,在`/usr/local/nginx`目录下生成RSA密钥、证书申请文件及自签名证书。接着,确认Nginx已安装SSL模块,若未安装则重新编译Nginx加入该模块。最后,编辑`nginx.conf`配置文件,启用并配置HTTPS服务器部分,指定证书路径和监听端口(如20000),保存后重启Nginx完成部署。
756 7
要统计Nginx的客户端IP,可以通过分析Nginx的访问日志文件来实现
要统计Nginx的客户端IP,可以通过分析Nginx的访问日志文件来实现
218 3
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
如何测试Nginx反向代理实现SSL加密访问的配置是否正确?
228 60
配置Nginx反向代理实现SSL加密访问的步骤是什么?
我们可以成功地配置 Nginx 反向代理实现 SSL 加密访问,为用户提供更安全、可靠的网络服务。同时,在实际应用中,还需要根据具体情况进行进一步的优化和调整,以满足不同的需求。SSL 加密是网络安全的重要保障,合理配置和维护是确保系统安全稳定运行的关键。
315 60
nginx开启局域网https访问
【10月更文挑战第22天】为了调试WebRTC功能,需要在局域网内搭建HTTPS协议。具体步骤包括:在已部署Nginx和安装OpenSSL的环境中生成私钥、证书签名请求和自签名证书;将生成的文件放置到Nginx的证书目录并修改Nginx配置文件,最后重启Nginx服务。注意,自签名证书不受第三方机构认可,如需正式使用,需向CA申请签名。
119 2
CORS跨域+Nginx配置、Apache配置
CORS跨域+Nginx配置、Apache配置
344 7
windows系统配置nginx环境运行pbootcms访问首页直接404的问题
windows系统配置nginx环境运行pbootcms访问首页直接404的问题
nginx反向代理与证书设置
nginx反向代理与证书设置
60 3
Nginx配置:阻止非国内IP地址访问的设置方法
此外,出于用户隐私和法律合规性的考虑,应慎重考虑阻止特定国家或地区IP地址的决策。在某些情况下,这可能被视为歧视性或违反当地法律。
342 2
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等