前端处理跨域

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;
        }
}
相关推荐
定栓26 分钟前
Webpack迁到Vite第七节(一):全家桶移除 — 配置文件与构建核心
前端·webpack·node.js
码艺-Alimjan33 分钟前
维吾尔语 RTL 排版的隐形利器:`\u200F`
前端·javascript
alwaysrun33 分钟前
Web之wasm-pack详解
前端·rust·web·wasm
广州华水科技1 小时前
如何通过单北斗GNSS实现精准的变形监测?
前端
云和数据.ChenGuang1 小时前
print(f“a+b=“,result) print(f“a+b={result}“)区别
java·前端·人工智能·python·深度学习
速易达网络2 小时前
基于 Vue3 + Flask + ECharts 构建政务 OA 系统门户
前端·echarts·政务
何何____2 小时前
TypeScript 函数类型兼容性
前端·javascript·typescript
雪芽蓝域zzs2 小时前
json数据转化成interface属性
前端·javascript·json
Java小卷2 小时前
Vue3 动态表单支持弹框组件
前端·vue.js·低代码