vue跨域解决方式

拼搏现实的明天。 2021-09-13 16:38 431阅读 0赞

## vue跨域解决方式 ##

##  ##

进行跨页面访问数据，出现如下问题

![在这里插入图片描述][20200614145409495.png]  
由于跨域的问题

解决方案1:  
controller层加上@CrossOrigin注解  
或者要访问那个方法，在方法上写也可以，就可以访问了  
![在这里插入图片描述][20200614145649521.png]

解决方案二：  
![在这里插入图片描述][20200614161058624.png]  
配置跨域的相关信息：

dev: {
    
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
          '/animalApi': {
            target: 'http://localhost:8080/',//设置你调用的接口域名和端口号 别忘了加http
            changeOrigin: true,    //這裡true表示实现跨域
            pathRewrite: {
              '^/animalApi': '/' //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
            }
          },
    
    
    
        },

访问路径：

queryAnimalList () {
          var self = this
          this.$axios.get('/animalApi/animal/queryAnimalList.do').then(function (response) {
            self.tableData = response.data
          })
        },

[20200614145409495.png]: /images/20210913/72add0fa045c4beda18dc9bf69b48680.png
[20200614145649521.png]: /images/20210913/69e92fcc1eb343e79edb5b55e811d21d.png
[20200614161058624.png]: /images/20210913/6743809fd25d4818a40bd2306c2959a7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，431人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue解决跨域问题

两天有朋友用vue写页面遇到了跨域问题（其实是后台的问题），但是在局域网下也得把数据调过来，我在这里简单总结两种方法吧，希望对大家有帮助。跨域问题的报错是下面这样的...

╰半夏微凉°/ 2024年04月18日 08:51/ 0 赞/ 75 阅读

相关 vue跨域解决方案

第一种： proxyTableproxyTable是解决开发环境中的跨域问题，正式环境的跨域需要使用nginx反向代理或者是后端解决 proxyTable: {

短命女/ 2023年06月15日 11:12/ 0 赞/ 3 阅读

相关跨域解决方式总结

我的笔记原文地址：[https://www.yuque.com/bubbletg/qd/bxh5ge][https_www.yuque.com_bubbletg_qd_bxh5

分手后的思念是犯贱/ 2022年10月06日 11:45/ 0 赞/ 244 阅读

相关跨域解决方式

今天做毕业设计又遇到问题，主要是跨域问题。 1.跨域请求头问题。方式一：响应头加上：一下代码，其他不用任何处理，推荐方法 / 用户登陆 @para

忘是亡心i/ 2022年05月26日 02:21/ 0 赞/ 235 阅读

相关【VUE axios】axios跨域方式

1、配置config下的index.js proxyTable: { '/apis': { target: '

爱被打了一巴掌/ 2022年05月19日 06:55/ 0 赞/ 316 阅读

相关 Vue解决跨域问题

在config文件夹下面的index.js里面进行修改这个是3\版本其他版本不一定是这个文件夹 module.exports = { dev:

àì夳堔傛蜴生んèń/ 2022年01月21日 06:11/ 0 赞/ 355 阅读

相关 ajax跨域问题解决方式

使用HBuilder编写前端页面可以在内置服务器上直接运行，非常方便。但它内置服务器的默认端口是`8848`，使用ajax访问8080端口时，会出现跨域的问题：

刺骨的言语ヽ痛彻心扉/ 2021年11月09日 04:54/ 0 赞/ 354 阅读

相关 vue跨域解决方式

vue跨域解决方式进行跨页面访问数据，出现如下问题 ![在这里插入图片描述][20200614145409495.png] 由于跨域的问题解决方案1:

拼搏现实的明天。/ 2021年09月13日 16:38/ 0 赞/ 432 阅读

相关 vue实现本地解决跨域 nginx实现部署解决跨域

这里就不解释什么是跨域了。跨域是前端最头疼的事情，它阻止了我们向后端请求数据，使之我们无法拿到数据去渲染。当然，后端可以解决跨域，而且相当简单。但是如果再后端没办法的情

女爷i/ 2021年08月13日 23:28/ 0 赞/ 589 阅读

相关 vue axios解决跨域

axios解决跨域 1、在config中的index.js文件中将proxyTable后的内容修改为:

阳光穿透心脏的1/2处/ 2021年07月24日 12:46/ 0 赞/ 496 阅读