学习笔记

nginx跨域访问,如何配置?宝塔面板nginx跨域访问如何配置跨域?

2023-09-18 08:26:33 juzhen 7

跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。 这里说明一下,无法跨域是浏览器对于用户安全的考虑,如果自己写个没有同源策略的浏览器,完全不用考虑跨域问题了。是浏览器的锅,对。 同源策略限制了一下行为: Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去。

在使用CDN的时候,很容易会遇到跨域的问题,当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域。跨域访问一般是配置服务器或者在目标系统中使用jsonp的方式返回数据都可以实现。

这里主要讲一下在Nginx中如何实现跨域访问,通常是通过配置HTTP响应头来允许跨域请求。跨域请求是指客户端网页的域名、端口或协议与服务器不同,因此需要服务器端进行额外的设置以允许这种跨域请求。

以下是通过Nginx配置允许跨域请求的方法:

1、配置响应头
打开您的Nginx配置文件(通常是nginx.conf或位于sites-available目录下的配置文件)。在所需的server或location块中添加如下配置:

location / {
# 允许来自任何来源的跨域请求
add_header Access-Control-Allow-Origin *;
# 允许特定的请求方法(例如:GET, POST, OPTIONS等)
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
# 允许特定的请求头字段
add_header Access-Control-Allow-Headers 'Authorization, Content-Type';
# 允许浏览器将携带的 Cookie 或授权信息包含在请求中
add_header Access-Control-Allow-Credentials 'true';
}

上述配置中,Access-Control-Allow-Origin设置为通配符,表示允许来自任何域的跨域请求。**如果您希望只允许特定域名进行跨域请求,可以将替换为特定的域名。**

2、处理预检请求(可选)
对于某些复杂的跨域请求(例如带有自定义请求头或使用了某些特殊HTTP方法的请求),浏览器会先发送一个预检请求(OPTIONS请求)来确认服务器是否允许跨域访问。您可以添加以下配置来处理预检请求:

location / {
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 'Authorization, Content-Type';
add_header Access-Control-Allow-Credentials 'true';
add_header Content-Length 0;
add_header Content-Type 'text/plain; charset=utf-8';
return 204;
}

# 处理其他请求
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST';
add_header Access-Control-Allow-Headers 'Authorization, Content-Type';
add_header Access-Control-Allow-Credentials 'true';
}

在处理预检请求时,返回204响应码表示允许跨域请求,不返回具体的数据。

3、重启Nginx
完成配置后,保存配置文件并重启Nginx服务器,使配置生效。
请注意,跨域请求是由浏览器执行的,所以以上配置在浏览器中起作用。不过,对于一些特定场景,例如使用XMLHttpRequest或Fetch API等进行跨域请求的前端代码,还需要在前端代码中设置相关的请求头,以便浏览器能够正确地发送跨域请求。

宝塔 Nginx 跨域问题Access-Control-Allow-Origin 的解决方案
1. 如果是使用nginx作为服务器的:
打开网站的设置,然后找到配置文件,添加如下代码:
图片alt

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

添加完之后,记得重启 nginx。

2. 如果使用的是 apache

打开网站的设置,找到配置文件,添加如下代码,如果网站开启了 ssl,注意有两处需要修改:

图片alt
图片alt

Header set Access-Control-Allow-Origin "*";

添加完之后,记得重启 apache

如果配置了发现没有生效,尝试清理浏览器缓存,如果网站有 cdn,尝试清理 cdn 缓存。
PS:在需要跨域的静态资源域名的nginx配置里添加跨域配置,如果你是引用人家的静态资源,就用自己的域名反向代理,把这几行配置写到反向代理配置里。

如果不想让所有人都可以引用,只想要指定域名使用的。

add_header 'Access-Control-Allow-Origin' 'https://xxxx.com';


首页
产品
新闻
联系