本地开发环境请求服务器接口跨域的问题(vue的问题)

简介: 本地开发环境请求服务器接口跨域的问题(vue的问题)

上面的这个报错大家都不会陌生,报错是说没有访问权限(跨域问题)。本地开发项目请求服务器接口的时候,因为客户端的同源策略,导致了跨域的问题。下面先演示一个没有配置允许本地跨域的的情况:

可以看到,此时我们点击获取数据,浏览器提示我们跨域了。所以我们访问不到数据。那么接下来我们演示设置允许跨域后的数据获取情况:

我们在1出设置了允许本地跨域,在2处,要注意我们访问接口时,写的是/api,此处的/api指代的就是我们要请求的接口域名。如果我们不想每次接口都带上/api,可以更改axios的默认配置axios.defaults.baseURL = '/api';这样,我们请求接口就可以直接this.$axios.get('app.php?m=App&c=Index&a=index'),很简单有木有。此时如果你在network中查看xhr请求,你会发现显示的是localhost:8080/api的请求地址。这样没什么大惊小怪的,代理而已:

好了,最后附上proxyTable的代码:

proxyTable: {
      // 用‘/api’开头,代理所有请求到目标服务器
      '/api': {
        target: 'http://jsonplaceholder.typicode.com', // 接口域名
        changeOrigin: true, // 是否启用跨域
        pathRewrite: { //
          '^/api': ''
        }
      }
}

注意:配置好后一定要关闭原来的server,重新npm run dev启动项目。不然无效。

axios的封装,主要是用来帮我们进行请求的拦截和响应的拦截。在请求的拦截中我们可以携带userToken,post请求头、qs对post提交数据的序列化等。在响应的拦截中,我们可以进行根据状态码来进行错误的统一处理等等。axios接口的统一管理,是做项目时必须的流程。这样可以方便我们管理我们的接口,在接口更新时我们不必再返回到我们的业务代码中去修改接口。


相关文章
|
JavaScript 前端开发 索引
如何判断一个值是否在数组内?
如何判断一个值是否在数组内?
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
8405 90
|
JavaScript 前端开发 Java
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
这篇文章详细介绍了如何在前端Vue项目和后端Spring Boot项目中通过多种方式解决跨域问题。
1353 1
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
|
Prometheus Kubernetes 监控
Kubernetes监控:Prometheus与AlertManager结合,配置邮件告警。
完成这些步骤之后,您就拥有了一个可以用邮件通知你的Kubernetes监控解决方案了。当然,所有的这些配置都需要相互照应,还要对你的Kubernetes集群状况有深入的了解。希望这份指南能帮助你创建出适合自己场景的监控系统,让你在首次发现问题时就能做出响应。
740 22
|
JavaScript
Vue 的父组件和子组件生命周期钩子执行顺序
在 Vue 中,父组件和子组件的生命周期钩子执行顺序如下:
|
存储 索引
antd中table组件选中单行换样式(比如背景颜色)
在Ant Design (antd)的Table组件中,可以通过设置`onRow`属性来定义行点击事件,从而改变被点击行的样式,如背景颜色。`onRow`是一个函数,返回一个对象,对象包含事件处理函数,如`onClick`。同时,使用`rowClassName`属性来指定行的类名,结合状态管理,可以实现点击某行后改变其背景颜色的效果。具体实现时,需要在组件状态中保存当前被点击行的索引,然后通过`rowClassName`判断并返回相应的类名。
1704 2
antd中table组件选中单行换样式(比如背景颜色)
|
JavaScript 前端开发
JavaScript——快速判断数组对象的值是否全部满足条件
JavaScript——快速判断数组对象的值是否全部满足条件
367 0
|
JavaScript 前端开发 API
vue如何解决跨域?原理?
vue如何解决跨域?原理?
268 0
|
JavaScript API
本地开发环境请求服务器接口跨域的问题(vue的问题)
本地开发环境请求服务器接口跨域的问题(vue的问题)
1113 1

热门文章

最新文章