vue跨域解决方式

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

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

相关阅读

相关 SpringBoot解决跨域方式

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

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

相关 vue跨域解决方案

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

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

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

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

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

相关 vue解决跨域

在vue根目录下创建出vue.config.js 写入如下代码以百度为例 module.exports = { devServer: {

以你之姓@/ 2023年02月22日 13:58/ 0 赞/ 22 阅读

相关跨域解决方式总结

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

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

相关跨域解决方式

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

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

相关【VUE axios】axios跨域方式

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

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

相关 Vue解决跨域问题

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

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

相关 vue跨域解决方式

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

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

相关 vue axios解决跨域

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

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