vue解决跨域问题汇总

男娘i 2021-07-25 19:52 386阅读 0赞

# 方法1：后台更改header #

`header('Access-Control-Allow-Origin:*')；`//允许所有来源访问  
`header('Access-Control-Allow-Method:POST,GET');` //允许访问的方式

# 方法2：使用Jquery提供的jsonp #

methods:{ 
    	getData(){ 
    		var self = this;
    		$.ajax({ 
    			url:"http://xxxxxxxx.json",
    			type:"GET",
    			dataType:"JSONP",
    			success:function(res){ 
    				self.data = res.data.slice(0,3)
    				self.opencode = res.data[0].opencode.split(',')	
    			}
    		})	
    	}
    }

# 方法3：使用http-proxy-middleware代理模块（项目使用vue-cli脚手架搭建） #

1.  打开config/index.js,在proxyTable中添加如下代码：
    
        proxyTable:{ 
        	'/api':{  //使用/api来代替https://xxxx.com
        		target:"https://xxxx.com",//源地址
        		changeOrigin:true,//改变源
        		pathRewrite:{ 
        			'^/api':"https://xxxxx.com" //路径重写
        		}
        	}
        }
2.  使用axios请求数据时直接使用"/api"

getData(){ 
    	axios.get('/api/xxx.json',function(res){ 
    		console.log(res);
    	})
    }

通过这种方法解决跨域，打包部署时还按这种方法会出现问题，解决方法如下下：

let serverUrl = "/api/" // 本地调试时
    // let aerverUrl = "https://xxxx.com" //打包部署上线时
    export default { 
    	dataUrl:serverUrl + "xxxx.json"
    }

## 引入jquery的两种方式 ##

#### 通过jquery文件引入 ####

#### 通过下载依赖安装依赖引入 ####

1.  下载依赖 `cnpm install jquery --save-dev`
2.  在webpack.base.conf.js文件中加入

plugins:[
    	new webpack.ProvidePlugin({ 
    		$:'jquery',
    		jQuery:'jquery'	
    	})
    ]

1.  在需要的template中引入，也可以在main.js中全局引入  
    `import $ from "jquery"`

发表评论取消回复

表情：

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

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

相关阅读

相关 vue解决跨域问题

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

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

相关 SpringBoot 解决VUE跨域问题

问题产生情况描述:今天使用VUE 调用SpringBoot 后台服务接口，提示跨域，错误截图如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_

比眉伴天荒/ 2023年10月10日 11:51/ 0 赞/ 38 阅读

相关 Vue解决跨域问题

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

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

相关 vue解决跨域问题（下）

目录 1. 前言 2. 问题引入 2.1 整合后端问题 2.2 整合前端问题 3. 解决方案 3.1 方案1（无效

男娘i/ 2022年10月13日 05:13/ 0 赞/ 176 阅读

相关 springboot+vue解决跨域问题

后台添加过滤器，允许跨域 @Configuration public class GlobalCorsConfig { @Bean

向右看齐/ 2022年05月07日 16:58/ 0 赞/ 268 阅读

相关 springboot+vue解决跨域问题

后台添加过滤器，允许跨域 @Configuration public class GlobalCorsConfig { @Bean

Dear 丶/ 2022年05月07日 03:48/ 0 赞/ 293 阅读

相关 Vue跨域问题终解决

config->index.js->dev->proxyTable\{\} 修改proxyTable\{\}为: proxyTable: { '

我会带着你远行/ 2022年03月21日 04:28/ 0 赞/ 281 阅读

相关 Vue解决跨域问题

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

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

相关解决vue的跨域问题

> 使用官方推荐方法进行跨域问题解决 ![71fbc7ebfd09435866efe8801ea111dd.png][] 之前使用vue-jsonp 来解决跨域问题，这次使

你的名字/ 2021年09月04日 05:28/ 0 赞/ 520 阅读

相关 vue解决跨域问题汇总

方法1：后台更改header `header('Access-Control-Allow-Origin:')；`//允许所有来源访问 `header('Access-

男娘i/ 2021年07月25日 19:52/ 0 赞/ 387 阅读