vue：跨域

一、跨域

        浏览器为了安全考虑，有一个最基本的安全策略，即同源策略。

        同源策略规定：浏览器在解析Ajax请求时，要求浏览器的路径与Ajax的请求的路径必须满足三个要求，即请求的协议、域名、端口号都相同，满足同源策略，可以访问服务器，否则，只要有一个不相同，那么都是非同源。

        跨域，是指当一个资源去访问另一个不同域名或者同域名不同端口的资源时，就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问，那么访问就会遇到跨域问题。如下所示：

使用axios发出一个get请求(假设vue前端应用跑在8080端口上，要发get请求的地址是5050)

<script>
	import axios from 'axios'
	export default {
		name:'App',
		methods: {
			getStudents(){
                //假设你vue前端应用跑在8080上，你要发get请求的地址是5050
				axios.get('http://localhost:5000/students').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			}
	}
</script>

这样，就违反了同源策略，发生了跨域请求：

遇到跨域：可以正常发出请求，但是浏览器拒绝接收响应。

跨域限制：

• 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
• 无法接触非同源网页的 DOM
• 无法向非同源地址发送 AJAX 请求（可以发送，但浏览器会拒绝接受响应）

 二、解决跨域

2.1 cors解决（后台解决）

        写服务器的人在返回响应的时候，给你几个特殊的响应头。浏览器解析到特殊响应头的时候，就会放行该响应。

2.2 jsonp解决：

        借助script标签里面的src属性，引入外部资源的时候不受同源策略限制来实现。而且只能解决get请求的跨域问题。

2.3 配置一个代理服务器：

三、使用vue-cli搭建代理服务器

3.1 方法一

 

 配置好之后，然后将你要请求的地址，不要直接请求原服务器，而是直接指向代理服务器：

3.2 方法二 

         方法一配置代理的方式只能配置一台代理服务器，下面介绍另一种更强大的方式：

 里面还可以自定义许多参数：

• 参数之代理前缀：

•  参数：changeOrigin:false （默认为true）：

        控制代理服务器是否撒谎（更换自己代理服务器的端口，也就是请求头中的host值）

• 参数：ws（默认true）

        支不支持webSocket

总结：