前端处理跨域

devnotbug2024-05-08 11:25

1、出现跨域的原因

同源策略是浏览器提供的一种安全机制，可以防止跨站脚本攻击；
同源策略：协议（http / https）、域名 / IP 地址、端口号，一致就是同源，不一致就是不同源；

2、JSONP 利用的不是xhr请求，利用的script标签的src可以跨域，请求接口资源，同时携带一个callback回调函数名字，将数字传给回调函数，解决get不能解决post

cors: 后端开启

html 复制代码

vue.config.js
// 192.168.13:8081/login
// /api/login
devServer: {
	proxy: {
		'/api': {
			target: '接口url地址'
      pathRewrite: '重写'
        }
	}
}

3、nginx 反向代理

在 nginx 服务器 nginx.com 配置文件

html 复制代码

server {
        listen       8083;# 监听的端口
        server_name  localhost; #监听的主机名 也可以是域名或者ip地址

        location ~ /api/ {            
            proxy_pass http://localhost:8084;
        }   
				location ~ /prod/ {           
            proxy_pass http://localhost:8085;
        }
}