vue、nginx配置axios跨域

组件中发起跨域请求:

this.$axios.get('/tengxun/location/v1/ip',{
	params: {
		key: this.tengxunKey,
		ip : this.ip
	}
})
.then()
.catch()

vue.config.js配置如下:

module.exports = {
 	devServer: {
	    proxy: {
	    	'/tengxun': {
	    		target: 'https://apis.map.qq.com/ws',	//接口地址
	    		ws: true,
		        changeOrigin: true,		//跨域
		        pathRewrite: {
		        	'^/tengxun': '' //重写接口
			    }
	    	}
	    }
 	}
}

nginx安装根目录/conf/nginx.conf文件修改配置:

location ^~ /tengxun/{
	proxy_pass https://apis.map.qq.com/ws/;
}

在这里插入图片描述

要在nginx配置vue dist文件访问,您需要将nginx配置修改为以下内容: ``` server { listen 80; server_name yourdomain.com; # 静态文件目录,这里指向vue打包后的dist目录 root /var/www/yourdomain.com/dist; # index.html作为默认页面 index index.html; # 处理静态文件的请求 location / { try_files $uri $uri/ /index.html; } } ``` 上面的代码将静态文件目录设置为`/var/www/yourdomain.com/dist`,这是您打包Vue项目后生成的dist目录。此外,我们还使用`try_files`指令来处理静态文件请求,这将使nginx尝试查找请求的文件,如果找不到,则重定向到index.html。 接下来,让我们来看看如何在nginx配置axios跨域。 ``` server { listen 80; server_name yourdomain.com; # 静态文件目录,这里指向vue打包后的dist目录 root /var/www/yourdomain.com/dist; # index.html作为默认页面 index index.html; # 处理静态文件的请求 location / { try_files $uri $uri/ /index.html; } # 处理跨域请求 location /api/ { proxy_pass http://your.api.server; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, DELETE, PUT'; add_header Access-Control-Allow-Headers 'Content-Type, Authorization, Accept'; } } ``` 上面的代码将/api/路径下的所有请求代理到http://your.api.server,并添加了一些跨域响应头,包括`Access-Control-Allow-Origin`、`Access-Control-Allow-Methods`和`Access-Control-Allow-Headers`。 注意,如果您的Vue应用程序使用了Vue Router,那么您需要将router的模式设置为history模式,以便nginx正确地处理路由。您可以在Vue Router进行如下配置: ``` const router = new VueRouter({ mode: 'history', routes: [...] }) ``` 希望这些信息能够帮助您!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值