浏览器跨域访问nginx(nginx跨域cors)

nginx跨域cors

请求图片跨域问题通常是由于浏览器的同源策略限制所致。同源策略要求在一个页面中，所有来自不同源头（协议、域名、端口）的资源，例如脚本、样式表、图片等，都必须经过同意才能被访问。

在跨域请求图片时，可以通过以下方法来解决跨域问题：

第一种方法：服务器设置CORS（跨域资源共享）策略，允许跨域请求图片资源。设置CORS策略可以在服务器端进行，一般需要在响应头中添加如下代码：

Access-Control-Allow-Origin: *

这里的“*”表示允许任意来源的请求访问该资源，也可以指定具体的域名，例如

Access-Control-Allow-Origin: https://www.example.com

第二种方法：使用代理方式请求图片资源。在客户端请求图片资源时，可以通过代理方式将请求发送到与图片资源同源的服务器上，再将结果返回给客户端。这种方法需要在服务器端配置代理，比较繁琐。

第三种方法：将图片资源转换成Base64编码格式，将编码后的字符串作为数据URL嵌入到页面中。这种方法不需要跨域请求图片资源，但会增加页面的数据量，不适合大型图片资源。

总的来说，最简单的方法是在服务器端设置CORS策略，允许跨域请求图片资源。如果无法修改服务器设置，可以考虑使用代理方式或将图片资源转换成Base64编码格式。

nginx跨域原理

通过add_header命令为响应增加跨域头：add_header "Access-Control-Allow-Origin" "*";

nginx跨域白名单

nginx中设置允许跨域的响应头方法：添加如下location：location / {add_header Access-Control-Allow-Origin *;}会在响应头中添加Access-Control-Allow-Origin字段以允许跨域

nginx跨域问题

在开发静态页面时，类似Vue的应用，我们常会调用一些接口，这些接口极可能是跨域，然后浏览器就会报cross-origin问题不给调。

最简单的解决方法，就是把浏览器设为忽略安全问题，设置--disable-web-security。不过这种方式开发PC页面到还好，如果是移动端页面就不行了。

解决办法

使用Nginx转发请求。把跨域的接口写成调本域的接口，然后将这些接口转发到真正的请求地址。

其实不仅是在开发调试时候能这么干，在生产环境也能这么玩。利用Nginx转发请求之后，就能够让所要部署的静态页面不需要放在跟请求接口同域的地方。

nginx跨域conf配置文件

　　ngx_upload模块是nginx中一个文件上传模式了，下面我们来看看nginx安装文件上传ngx_upload模块步骤，希望例子对各位有帮助.

　　安装nginx，并加入nginx upload module和nginx cache purge module:

　　mkdir ~/download

　　cd ~/download

　　wget http://www.grid.net.ru/nginx/download/nginx_upload_module-2.0.12.tar.gz

　　tar zxf nginx_upload_module-2.0.12.tar.gz

　　git clone https://github.com/FRiCKLE/ngx_cache_purge.git

　　yum groupinstall "Development Tools"

　　yum install pcre-devel zlib-devel openssl-devel

　　wget http://nginx.org/download/nginx-1.2.3.tar.gz

　　tar zxf nginx-1.2.3.tar.gz

　　cd nginx-1.2.3

　　./configure --prefix=/usr/local/nginx --with-pcre --with-http_ssl_module --add-module=../nginx_upload_module-2.0.12 --add-module=../ngx_cache_purge

　　make && make install

　　尝试启动：

　　/usr/local/nginx/sbin/nginx

　　ps aux | grep nginx

　　假如我的网站是放在 /home/mysite/www 下的，而nginx配置文件就放在 /home/mysite/etc 下：

　　省略了很多内容的配置文件，mysite.conf：

　　server {

　　listen 80;

　　server_name 192.168.1.123;

　　client_max_body_size 20M;

　　location /upload {

　　include /home/mysite/etc/nginx/ngx_upload.conf;

　　}

　　....其他的配置....

　　location @after_upload {

　　proxy_pass http://www_backend;

　　}

　　}

　　将nginx_upload.conf独立开来，是因为其他网站也可以包含此上传配置文件：

　　nginx_upload.conf：

　　upload_pass @after_upload;

　　upload_pass_args on;

　　upload_cleanup 400 404 499 500-505;

　　upload_store /home/mysite/www/uploads/tmp;

　　upload_store_access user:r;

　　upload_limit_rate 128k;

　　upload_set_form_field "${upload_field_name}_name" $upload_file_name;

　　upload_set_form_field "${upload_field_name}_content_type" $upload_content_type;

　　upload_set_form_field "${upload_field_name}_path" $upload_tmp_path;

　　upload_aggregate_form_field "${upload_field_name}_md5" $upload_file_md5;

　　upload_aggregate_form_field "${upload_field_name}_size" $upload_file_size;

　　upload_pass_form_field "^.*$";

　　而最后那个参数：upload_pass_form_field，代表可以将表单的所有参数保持原样传递到后端，需要区分文件保存类型时很有用。