Vue跨域问题解决方案

最新推荐文章于 2024-10-08 02:10:34 发布

多吃芹菜好处多

最新推荐文章于 2024-10-08 02:10:34 发布

阅读量2.2k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/chiqincai/article/details/125563971

版权

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参数的值，所以我们还需要修改服务端的代码，修改参数解析方法。