前端处理跨域

1、出现跨域的原因

  1. 同源策略是浏览器提供的一种安全机制,可以防止跨站脚本攻击;
  2. 同源策略:协议(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;
        }
}
相关推荐
草梅友仁2 小时前
草梅 Auth 1.6.0 发布密码强度组件 Twilio 短信支持 | 2025 年第 36 周草梅周报
前端·开源·github
正义的大古2 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
Hashan2 小时前
深入理解:Webpack编译原理
前端·webpack
雲墨款哥2 小时前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程2 小时前
深入JS(一):手写 Promise
前端·javascript
Hierifer3 小时前
跨端技术:浅聊双线程原理和实现
前端
FreeBuf_3 小时前
加密货币武器化:恶意npm包利用以太坊智能合约实现隐蔽通信
前端·npm·智能合约
java水泥工4 小时前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
半夏陌离4 小时前
SQL 实战指南:电商订单数据分析(订单 / 用户 / 商品表关联 + 统计需求)
java·大数据·前端
子兮曰4 小时前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite