Vue+axios如何解决跨域

1、为什么会产生跨域?

出于浏览器的同源策略限制。 同源策略(Sameoriginpolicy)是一种约定,是浏览器的一种安全机制,它阻止了不同域之间进行的数据交互,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。

2、什么是跨域?

当后端接口的url和页面的url的端口,协议,域名有一个或多个不同时就会产生跨域。

3、如何解决跨域?

在vue.config.js文件中配置,有的则在config文件夹下的index.js文件中配置。

在配置完成后还是报错跨域,则重启编译器运行即可。

proxy: {
  '/api': {
    target: 'http://192.168.1.36:8080',// 需要代理的后端接口
    changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求
    pathRewrite: {//重写匹配的字段,如果不需要在请求路径上,重写为""
      '/api': ''
    }
  }
}

Proxy也称为网络代理,什么是代理?通俗来说就是一个中间商。官方说就是一种特殊的网络服务,允许一个客户端通过这个服务与另一个网络终端(一般为服务器)进行非直接的连接,一些网关、路由器等网络设备就具有网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全,防止服务器被攻击。

4、axios封装

// 创建axios实例
const service = axios.create({
  baseURL: "/api",
  // 请求超时的时间
  timeout: 10000,
});

5、创建请求

export function getdeptinfo(){
    return request({
        url:"/queryAllDeptAndIntroduce",
        method:"GET",
    })
}
相关推荐
王哈哈^_^39 分钟前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具2 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据3 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
334554324 小时前
element动态表头合并表格
开发语言·javascript·ecmascript