开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情

axios:读音「艾科C藕丝」

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域，跨域的问题相信每个开发人员都遇见过，那一般都是怎么解决的呢？我总结了常用的三种方法

方法一：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', 原理仅作了解：请求的网址自动变成www.tpadmin.com/proj/method… 这是为什么呢？原来由于跨域访问的只限制xhr类型的请求，所以js中就利用了这一特点，让服务端不在返回的是一个JSON格式的数据，而是返回一段JS代码，将JSON的数据以参数的形式传递到这个函数中， 而函数的名称就是callback参数的值，所以我们还需要修改服务端的代码，修改参数解析方法。