前言

提示:上篇文章提到了跨域问题和代理问题,解决之后熬了几天功能终于上线了,发布之后,直接傻眼了,url请求直接404了,本以为在不济也是个跨域报错,没想到直接404


提示:以下是本篇文章正文内容,下面案例可供参考

一、在开发环境的Vue.config中设置了proxy?不好意思!生产环境没有用

原因分析
首先得知道开发环境中前端使用的是什么?肯定是用的Vue。
生产环境用的又是什么呢?是webpack打包后的Html。
在用开发环境的时候,Vue中有vue.cli,自带了 Proxy 的能力,所以可以帮忙代理。跨域问题就解决了
Html有这种类似vue.cli的东西吗?(至少我不知道)所以到生产环境自然就没有用了

二、生产环境怎么办呢?

1.关闭浏览器跨域

这种方法铁定不行,客户哪知道什么跨域,所以pass

2.CORS

即资源共享,可以让后端人员去加,但是调用别人家API,总不至于让别人去给你设置这玩意吧

3.Nginx

作为一个老牌的反向代理工具,把你生产服务器反向代理出去不就可以了,在配置文件修改就行。
nginx配置在linux的位置一般在etc/nginx/nginx.config中,如果有多个服务,可能会分成多个配置文件进行管理,具体可以去问运维人员,你这个项目的反向代理配置在哪里(既然都问了,不如让他直接给你改得了,把源Ip给他就行),之后就可以修改代码了

	server {
	    listen 80;
	    server_name 项目名;
	    
		#自己项目的配置
	    location / {
	        proxy_set_header X-Real-IP $remote_addr;
	        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	        proxy_set_header Host $http_host;
	        proxy_set_header X-NginX-Proxy true;
			#自己项目的位置
	        proxy_pass http://localhost:8083/;
	        proxy_redirect off;
	    }
	
		#添加访问目录为/api的代理配置,使以“/apiV1”开头的地址都转到“源IP(反向代理)”上
	    location /apiV1 { 
	        rewrite  ^/apiV1/(.*)$ /$1 break;
	        proxy_pass   '源IP(反向代理)';
	    }
}

总结

反向代理是什么呢?
简单来说就是别人访问我们的服务器,我们指向某个服务

跨域和反向代理还是挺重要的,面试高频题啊,有什么错误和建议欢迎指出

Logo

前往低代码交流专区

更多推荐