本地开发环境请求服务器接口跨域的问题(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接口的统一管理,是做项目时必须的流程。这样可以方便我们管理我们的接口,在接口更新时我们不必再返回到我们的业务代码中去修改接口。


相关文章
|
5天前
|
弹性计算 缓存 负载均衡
【阿里云弹性计算】游戏服务器部署实战:利用阿里云ECS打造低延迟游戏环境
【5月更文挑战第24天】使用阿里云ECS打造低延迟游戏环境的实战指南,包括选择高性能处理器和SSD存储的实例,规划架构,选择近玩家的地域和可用区,部署软件,优化性能及监控。通过负载均衡、自动扩展和数据缓存提升体验,同时关注数据安全与网络安全。
34 4
|
12天前
|
自然语言处理 负载均衡 监控
处理HTTP请求的服务器
处理HTTP请求的服务器
29 1
|
14天前
|
JSON JavaScript API
使用 Node.js 开发一个简单的 web 服务器响应 HTTP post 请求
使用 Node.js 开发一个简单的 web 服务器响应 HTTP post 请求
38 1
|
14天前
|
JSON JavaScript 中间件
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
使用 Node.js 开发一个简单的 web 服务器响应 HTTP get 请求
12 2
|
14天前
|
存储 JSON JavaScript
Node.js 上开发一个 HTTP 服务器,监听某个端口,接收 HTTP POST 请求并处理传入的数据
Node.js 上开发一个 HTTP 服务器,监听某个端口,接收 HTTP POST 请求并处理传入的数据
14 0
|
14天前
|
JSON 数据格式 开发者
【公众号开发】Access Token的获取 · 请求公众号服务器创建自定义菜单 · 处理自定义菜单按钮事件(下)
【公众号开发】Access Token的获取 · 请求公众号服务器创建自定义菜单 · 处理自定义菜单按钮事件
21 0
|
18小时前
|
弹性计算 运维 监控
【阿里云弹性计算】ECS实例的生命周期管理:阿里云自动化工具与策略介绍
【5月更文挑战第29天】阿里云提供自动化工具和策略管理ECS实例生命周期,如资源编排服务(ROS)实现一键部署,通过模板定义实例配置;自动化运维服务(OOS)执行自动化运维任务;弹性伸缩策略动态调整实例数量;定时启动/停止策略节省成本;监控告警策略确保业务连续性。通过这些工具和策略,企业可实现ECS实例的高效管理。
8 2
|
18小时前
|
弹性计算 运维 监控
【阿里云弹性计算】从物理机到阿里云ECS:企业IT架构转型升级之路
【5月更文挑战第29天】随着云计算兴起,企业正转向阿里云ECS以应对传统物理机的挑战。本文详述了这一转型过程,包括现状评估、迁移计划制定、测试环境搭建、应用数据迁移及后期监控优化。转型升级可提升资源利用率,降低运维成本,加快业务响应,并增强数据安全。示例代码展示了使用阿里云Python SDK创建ECS实例的过程。
13 1
|
18小时前
|
弹性计算 监控 开发工具
【阿里云弹性计算】阿里云ECS的网络优化实践:VPC配置与网络性能提升
【5月更文挑战第29天】阿里云ECS通过虚拟私有云(VPC)提供高性能、安全的网络环境。VPC允许用户自定义IP地址、路由规则和安全组。配置包括:创建VPC和交换机,设定安全组,然后创建ECS实例并绑定。优化网络性能涉及规划网络拓扑、优化路由、启用网络加速功能(如ENI和EIP)及监控网络性能。示例代码展示了使用Python SDK创建VPC和交换机的过程。
13 3
|
19小时前
|
存储 固态存储 安全
阿里云4核CPU云服务器价格参考,最新收费标准和活动价格
阿里云4核CPU云服务器多少钱?阿里云服务器核数是指虚拟出来的CPU处理器的核心数量,准确来讲应该是vCPU。CPU核心数的大小代表了云服务器的运算能力,CPU越高,云服务器的性能越好。阿里云服务器1核CPU就是一个超线程,2核CPU2个超线程,4核CPU4个超线程,这样云服务器可以同时处理多个任务,计算性能更强。如果网站流程较小,少量图片展示的企业网站,建议选择2核及以上CPU;如果网站流量较大,动态页面比较多,有视频等,建议选择4核、8核以上CPU。
阿里云4核CPU云服务器价格参考,最新收费标准和活动价格