Vue中解决跨域问题备忘

Vue中解决跨域问题备忘

1. 什么是跨域？

跨域指浏览器不允许当前页面的所在的源,
去请求另一个源的数据。
	源 指的是  协议，端口，域名。
	只要这个3个中有一个不同就是跨域。 
这里列举一个经典的列子：

#协议跨域
http://a.baidu.com访问https://a.baidu.com；
#端口跨域
http://a.baidu.com:8080访问http://a.baidu.com:80；
#域名跨域
http://a.baidu.com访问http://b.baidu.com；

最根本的解决跨越手段，是后端服务器处理了Cros的跨域问题，
这样前端或程序中可随意访问，无需通过代理转发等手段去解决；

2. Vue中跨域的解决思路： 前端服务[Vue页面]-代理服务[Vue脚手架]-后端服务

3. Vue 中配置跨域，在 vue.config.js中配置

3-1 简单配置：方式一

/*
说明：
	1. 该方式写法简单，但当存在多个后端接口地址时，无法区分；
	2. 当前端存在同名的资源时，不会访问后端服务器，直接访问前端的资源了；
*/
module.exports = {
  devServer: {
  	// 这样配置后，Vue页面中使用axios发送请求时，
  	//	后端的接口地址通过Url  http://localhost:8080/getCars 发送请求，
  	//	会自动通过代理服务器转发Url	http://192.168.100.56:5000/getCars
    proxy: 'http://192.168.100.56:5000' // 配置访问的服务器地址
  }
}

3-2 完整配置：方式二

/*
说明：
	1. 该方式配置稍稍麻烦，但完整的解决了方法一的不足；
	2. 功能虽然强大了，但每个请求都需要使用前缀 "test1、test2"等自定义的前缀名：
		如： 'http://localhost:8080/test1/getCars'  ===>  'http://192.168.100.88:5000/getCars'
		this.$axios.post('http://localhost:8080/test1/getCars',{
			id:1
		}).then(res=>{
			console.log(res.data);
		},err=>{
			console.log(err);
		})
*/
module.exports = {
  devServer: {
    proxy: {
      '/test1': {
        target: 'http://192.168.100.88:5000', // 配置访问的服务器地址
        pathRewrite: { '^/test1': '' },  // 用于将请求中的 /api 字符串替换为空, 然后访问地址就能正确访问，若不添加此行配置，那么访问地址就变成了： http://localhost:5000/api/request_url，这样的请求就会出现 404 操作
        ws: true, // 是否支持 webstocket, 默认是 true
        changeOrigin: true // 用于控制请求头中的 host 值, 默认是 ture
      },
      '/test2': {
        target: 'http://192.168.100.99:6000', // 配置访问的服务器地址
        pathRewrite: { '^/test2': '' },  // 用于将请求中的 /api2 字符串替换为空, 然后访问地址就能正确访问，若不添加此行配置，那么访问地址就变成了： http://localhost:6000/api/request_url，这样的请求就会出现 404 操作
        ws: true, // 是否支持 webstocket, 默认是 true
        changeOrigin: true // 用于控制请求头中的 host 值, 默认是 ture
      }
    }
  }
}

4. 实例：Vue中使用代理Url–自动发起后端服务请求

// 引入 axios 库
import axios from 'axios'
export default {
	name: 'Student', // 组件名称
	// 组件使用的方法
	methods: {
		注释内容 `:get 请求访问 /test1 前缀开头的地址，实际上访问的地址是： http://192.168.100.88:5000/request_url`
		testMethods1() {
			axios.get('http://localhost:8080/test1/request_url').then(res => {
				console.log(res.data); // 输出请求响应值内容
			});
		},
		注释内容 :`get 请求访问 /test2 前端开头的地址，实际上访问的地址是：http://192.168.100.99:6000/request_url`
		testMethods2() {
			axios.get('http://localhost:8080/test2/request_url').then(res => {
				console.log(res.data); // 输出请求响应值内容
			})
		}
	}	
}