vue中跨域解决办法

项目在上线之后,前后端的代码放在同一个服务器下面,就不存在跨域的问题。然而在前后端分离的开发中,跨域在所难免。在以前,存在跨域的时候一般都叫后台小伙伴设置,但是vue中提供了一种方法,在前端也可以设置解决跨域的问题。下面给大家介绍一下:

比如我们服务端的地址为http://localhost:3000;而我们开发的地址为http://localhost:8080;由于端口不一致导致了跨域。解决办法:

一、修改config文件夹中index.js文件dev:{。。。}

proxyTable: {
			"/api": {
				target: "http://loacalhost:3000",
				changeOrigin: true,
				pathRewrite: {
					'^/api': ''
				}
			}
		}

二、在main.js中添加HOST

Vue.prototype.HOST = '/api'

然后我们就可以在给后台发送请求时写成:

		created(){
			var url = this.HOST+'/login';
			this.$axios.post(url,{
					username: 'gdou',
					password: '2015116414xx'
			})
			.then(res => {
				console.log(res.data)
			})
			.catch(error => {
				console.log(error)
			})
		}

我们修改了配置文件,别忘了重启服务哦~~

Vue 跨域解决方式有以下几种: 1. 通过服务端配置 CORS(跨域资源共享):在服务端的响应头设置 `Access-Control-Allow-Origin` 字段,允许指定的域名进行跨域访问。这种方式需要服务端的支持,如果你是自己搭建的服务端,可以参考以下示例代码: ```python from flask import Flask, jsonify app = Flask(__name__) @app.route('/api') def api(): response = jsonify({'hello': 'world'}) # 允许指定的域名进行跨域访问 response.headers['Access-Control-Allow-Origin'] = 'http://localhost:8080' return response if __name__ == '__main__': app.run() ``` 2. 通过代理解决跨域问题:在 Vue 的 `config/index.js` 配置代理,将请求转发到本地的服务端,再由服务端进行真正的请求。这种方式不需要服务端的支持,但需要在本地搭建一个服务端。示例代码如下: ```javascript module.exports = { dev: { proxyTable: { '/api': { target: 'http://localhost:5000', // 本地的服务端地址 changeOrigin: true, pathRewrite: { '^/api': '/api' // 将请求的 /api 前缀转发到本地的 /api 路径 } } } } } ``` 3. JSONP(JSON with Padding)跨域:通过动态创建 `script` 标签来访问服务端接口,服务端返回的数据需要用一个函数包裹,以便在客户端执行。这种方式只支持 GET 请求,并且需要服务端的支持。示例代码如下: ```javascript const script = document.createElement('script') script.src = 'http://example.com/api?callback=handleResponse' document.body.appendChild(script) function handleResponse(response) { console.log(response) } ``` 4. WebSocket 跨域:通过 WebSocket 协议进行双向通信,不受同源策略的限制。这种方式需要服务端的支持,并且需要在客户端和服务端都进行相应的配置。示例代码如下: ```javascript const socket = new WebSocket('ws://example.com/socket') socket.onopen = function(event) { console.log('WebSocket 已连接!') socket.send('Hello WebSocket!') } socket.onmessage = function(event) { console.log('收到消息:', event.data) } socket.onclose = function(event) { console.log('WebSocket 已关闭!') } ``` 以上是 Vue 跨域解决方式的一些常见示例,具体的解决方案需要根据实际情况进行选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值