vue跨域问题的三种解决方案_前端解决ajax跨域问题的方式

vue跨域问题的三种解决方案_前端解决ajax跨域问题的方式axios跨越问题解决的三种方法

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

axios:读音「艾科C藕丝」

方法一:SpringBoot后端进行处理

在 每个 Controller 类上加入 @CrossOrigin 注解
或者在 Controller的基类中加上 @CrossOrigin 注解然后其他 Controller 类就有了这个 @Controller 此时跨域访问就不会报错了。

浏览器 在同一个页面访问不同的域 是存在跨域问题的
但 服务器之间的访问是 没有跨域问题 因为服务器之间的请求不走XHR(XMLHttpRequest)

方法二: 需要在前端设置代理, 通过代理访问 SpringBoot后端API

1.在 src / utils / request.js 中配置
baseUrl: ‘http://127.0.0.1:8020/myhd’
2.在 vue.config.js 中配置Proxy

'': {
 	 target:  'http://127.0.0.1:8020/myhd'
	},
'/apiout': { // 外网
  target: 'https://myhd-outer-ui.cloud.castc.cn',
  changOrigin: true, // 允许跨域
  pathRewrite: {
    '^/apiout': ''
  }
},

配置代理方式只能解决npm run dev开发时的跨域问题,运行npm run build将项目打包到dist目录后只能通过nginx代理来解决跨域问题

方法三: 使用jsonp解决跨域(只能解决get方式跨域问题,不推荐)

方法:在ajax请求中加入配置项 dataType : 'jsonp',
原理仅作了解:请求的网址自动变成http://www.tpadmin.com/proj/method?callback=jQuery331015214102388989237
这是为什么呢?原来由于跨域访问的只限制xhr类型的请求,所以js中就利用了这一特点,让服务端不在返回的是一个JSON格式的数据,而是返回一段JS代码,将JSON的数据以参数的形式传递到这个函数中,
而函数的名称就是callback参数的值,所以我们还需要修改服务端的代码,修改参数解析方法。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/188199.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • ICMP协议/IGMP协议详解

    ICMP协议/IGMP协议详解网际控制报文协议ICMP功能:ICMP允许主机或者路由器报告差多情况和提供有关异常情况的报告,它是网络层的协议,ICMP报文装在IP数据报中,作为其中的数据部分。ICMP报文的种类ICMP差错报文终点不可达源点抑制超时参数问题改变路由(重定向)ICMP询问报文回送请求和回答时间戳请求和回答ICMP应用举例ping(PacketInternetGroper)命令:该命令利用发送分

    2022年9月14日
  • zookeeper使用场景及示例_与Zookeeper类似的框架

    zookeeper使用场景及示例_与Zookeeper类似的框架源码:https://gitee.com/suwenguang/testzookeeper集群角色:leader主follower从observer观察者:不参与写的选举,但是提供读概念:数据模型zookeeper的数据模型和文件系统类似,每一个节点称为:znode.是zookeeper中的最小数据单元。每一个znode上都可以保存数据和挂载子…

    2022年10月3日
  • navicat for mysql 15 激活码【在线注册码/序列号/破解码】[通俗易懂]

    navicat for mysql 15 激活码【在线注册码/序列号/破解码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月19日
  • 软件工程与软件测试_软件工程导论(第六版)

    软件工程与软件测试_软件工程导论(第六版)1.软件测试基础2.单元测试3.集成测试4. 确认测试5.白盒测试技术6.黑盒测试技术7.调试8.软件可靠性

    2022年10月4日
  • 什么是Linux内核版本_linux内核深度解析

    什么是Linux内核版本_linux内核深度解析Linux内核版本有两种:稳定版和开发版,Linux内核版本号由3个数字组成:r.x.yr:目前发布的内核主版本。x:偶数表示稳定版本;奇数表示开发中版本。y:错误修补的次数。内核版本号每位都代表什么?以版本号为例:2.6.9-5.ELsmp,r:2,主版本号x:6,次版本号,表示稳定版本y:9,修订版本号,表示修改的次数头两个数字合在一齐可以描述内核系列。如…

    2022年8月23日
  • 实体中时间类型LocalDateTime,查询的时候mybatis报错

    实体中时间类型LocalDateTime,查询的时候mybatis报错解决方式:将数据库连接池设置为1.1.21版本<dependency><groupId>com.alibaba</groupId><artifactId>druid-spring-boot-starter</artifactId><version>1.1.21</version></dependency>

    2022年6月16日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号