前端处理跨域

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;
        }
}
相关推荐
明月_清风23 分钟前
打字机效果优化:用 requestAnimationFrame 缓冲高频文字更新
前端·javascript
明月_清风24 分钟前
Markdown 预解析:别等全文完了再渲染,如何流式增量渲染代码块和公式?
前端·javascript
掘金安东尼1 小时前
用 CSS 打造完美的饼图
前端·css
掘金安东尼8 小时前
纯 CSS 实现弹性文字效果
前端·css
牛奶9 小时前
Vue 基础理论 & API 使用
前端·vue.js·面试
牛奶9 小时前
Vue 底层原理 & 新特性
前端·vue.js·面试
anOnion9 小时前
构建无障碍组件之Radio group pattern
前端·html·交互设计
pe7er9 小时前
状态提升:前端开发中的状态管理的设计思想
前端·vue.js·react.js
SoaringHeart10 小时前
Flutter调试组件:打印任意组件尺寸位置信息 NRenderBox
前端·flutter
晚风予星11 小时前
Ant Design Token Lens 迎来了全面升级!支持在 .tsx 或 .ts 文件中直接使用 Design Token
前端·react.js·visual studio code