前端处理跨域

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;
        }
}
相关推荐
狗头大军之江苏分军5 分钟前
前端路由是怎么来的
前端·javascript·后端
Patrick_Wilson8 分钟前
Cookie 作用域避坑:父域泄漏、同名优先级与多环境隔离
前端·http·浏览器
api工厂16 分钟前
ZCode 3.0 版本搭配GLM-5.2能力测试
前端·人工智能·ai
小小小小宇19 分钟前
单点登录(二)
前端
阿猫的故乡35 分钟前
Vue + Axios 从入门到封装:拦截器、错误处理、请求取消、接口管理全搞定
前端·javascript·vue.js
良逍Ai出海1 小时前
免费模板搭完独立站后,我用 Codex + Figma 做了自己的页面设计
前端·人工智能·figma
纽格立科技1 小时前
DRM 发射端链路图(下)
前端·人工智能·车载系统·信息与通信·传媒
代码小库1 小时前
【2026前端转 AI 全栈指南】第 2 章(下):NestJS 项目创建 · MongoDB 配置 · 项目启动与调试
前端·数据库·mongodb
之歆1 小时前
Promise 基础技术深度解析:从回调地狱到链式调用
前端·okhttp·promise
甲维斯1 小时前
国产版“Codex”初体验,智谱ZCode很强啊!
前端·人工智能·ai编程