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

2022-11-10 19:51:47 浏览数 (1)

大家好，又见面了，我是你们的朋友全栈君。

方法一：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

代码语言：javascript复制
'': {
 	 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参数的值，所以我们还需要修改服务端的代码，修改参数解析方法。

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

javascript json http npm

0 人点赞