Nginx教程

nginx 反向代理解决前端跨域问题

本文主要是介绍nginx 反向代理解决前端跨域问题,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

反向代理解决跨域问题

跨域问题是什么?

场景:
前端环境在192.168.1.5:80
前端调用后端接口在192.168.2.5:55000
此时前端会出现跨域问题

解决方法

环境ubuntu 18.04 nginx 1.14
1.配置nginx

sudo apt update
sudo apt install nginx

编辑nginx配置文件/etc/nginx/sites-available/default

server {
        listen 80 default_server;
	listen [::]:80 default_server;

        root /var/www/html;

	# Add index.php to the list if you are using PHP
	index index.html index.htm index.nginx-debian.html;

	server_name 192.168.1.5;

	location /api {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		proxy_pass https://192.168.2.5:55000;
                rewrite ^/api/(.*)$ /$1 break;
                add_header 'Access-Control-Allow-Origin' '*'; 
                add_header 'Access-Control-Allow-Credentials' 'true'; 
		#try_files $uri $uri/ =404;
	}
}

将前端数据放在/var/www下。
请求http://192.168.1.5/api/test就相当于访问https://192.168.2.5:55000/test
从而避免跨域产生的问题。

这篇关于nginx 反向代理解决前端跨域问题的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!