vue的proxy代理

sinat_36141399

已于 2022-06-28 15:14:14 修改

阅读量3.5k

点赞数

文章标签：前端服务器

于 2022-06-28 09:57:37 首次发布

本文链接：https://blog.csdn.net/sinat_36141399/article/details/125488052

版权

本文探讨了浏览器的同源策略限制导致的跨域问题，介绍了Vue中使用proxy代理和Nginx反向代理的解决方案。重点讲述了如何配置Vue的devServer和nginx，让请求通过后端绕过浏览器的同源限制获取远程资源。

摘要由CSDN通过智能技术生成

一、跨域问题

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
出于浏览器的同源策略限制。同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。即便两个不同的域名指向同一个ip地址，也非同源。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

同源策略限制内容有：

Cookie、LocalStorage、IndexedDB 等存储性内容
DOM 节点
AJAX 请求发送后，结果被浏览器拦截了

有三个标签是允许跨域加载资源:

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

二、vue解决跨域问题

使用proxy代理，这种方法本质上仍然遵循了同源政策，只是换了一个请求的思路，将请求移至了后端。

同源政策是浏览器层面的限制。那么，如果我们不在前端跨域，而将“跨域”的任务交给后端服务，那么就规避了同源政策了。

（1）在Vue2中，proxy代理請求配置：

/config/index.js

proxyTable: {
    '/film': {
        target: 'https://m.maizuo.com',
        changeOrigin: true,
        pathRewrite: {
            '^/film': ''
        }
    },
},

（2）axios 请求部分：

axios.get('/film/gateway.......’).then((res)=>{....})

我们请求发送给devServer服务器，在由devServer服务器做一次转发，发送给数据接口服务器；请求发给devServer服务器不存在跨域（同源），而devServer请求是服务器与服务器之间，不存在跨域问题。这样就做到了http://localhost:8080//film/gateway请求https://m.maizuo.com/gateway的资源

（3）部署到nginx服务器，转发请求。

使用 nginx 反向代理实现跨域，是最简单的跨域方式。只需要修改 nginx 的配置即可解决跨域问题，支持所有浏览器，支持 session，不需要修改任何代码，并且不会影响服务器性能。

我们只需要配置nginx，在一个服务器上配置多个前缀来转发http/https请求到多个真实的服务器即可。

server {
    listen 80;
    server_name xxx.xxx.xxx.xxx;
    charset utf-8;
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    client_max_body_size 75M;

    location /static {   
		alias /data/dist/static/;
	}
 
	location ^~/film/{       
		proxy_pass https://m.maizuo.com/;    #请求转向服务器
		add_header Content-Type "text/plain;charset=utf-8";
		add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Credentials' 'true';
		add_header 'Access-Control-Allow-Methods' 'GET, POST';	
	}
	location / {            
		root /data/dist/;    #根目录
		index index.html index.htm;     #默认页面，入口文件
	}

}

也可以先用vue搭建一个本地服务器运行打包后dist文件

1.npm install -g http-server

2.开启服务: http-server ./dist

3.会出现访问地址，浏览器预览即可

参考链接：

跨域的几种解决方案_dralexsanderl的博客-CSDN博客_跨域解决方案