vue跨域解决方式

拼搏现实的明天。 2021-09-13 16:38 404阅读 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 条评论，404人围观）

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

相关阅读

相关 vue解决跨域问题

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

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

相关 Vue解决接口跨域

Vue解决接口跨域一、vue.config.js配置文件二、全局路径 -------------------- 一、vue.config.js配置文

╰半夏微凉°/ 2024年04月06日 15:26/ 0 赞/ 46 阅读

相关 Vue解决跨域问题

创建Vue项目，在src同级目录下创建vue.config.js文件。 vue.config.js文件内容如下： module.exports = {

野性酷女/ 2023年10月08日 23:27/ 0 赞/ 22 阅读

相关 SpringBoot解决跨域方式

跨域是指在 Web 应用中，一个服务器资源或应用访问另一个服务器资源或应用的资源时候。由于浏览器的同源策略，一般情况下同一个域中的网站或应用可以互相访问资源，但跨域访问

小咪咪/ 2023年10月04日 22:23/ 0 赞/ 26 阅读

相关 Vue---Vue跨域解决方案

vue.config.js vue-cli3及更高版本的脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建。vue.config.

青旅半醒/ 2023年02月27日 13:52/ 0 赞/ 88 阅读

相关跨域解决方式总结

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

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

相关跨域解决方式

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

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

相关 Vue解决跨域问题

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

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

相关 vue跨域解决方式

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

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

相关 vue axios解决跨域

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

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