什么是跨域？解决方法

一、为什么会出现跨域问题

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

二、什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

三、非同源限制

【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

【2】无法接触非同源网页的 DOM

【3】无法向非同源地址发送 AJAX 请求

 4. 出现跨域,解决的办法?

      1. 后台改: 后台设置响应头 res.setHeader('Access-Control-Allow-Origin','*')

      2.jsonp: 不会阻止script标签的src属性的请求,前端写一个函数,后端返回函数的调用

      3. 配置代理

      4.nginx反向代理

后台解决

const http = require('http')

http.createServer((req,res)=>{
	res.setHeader('Access-Control-Allow-Origin','*')
	res.end('haha')
}).listen(3000)

配置代理

        在public和src文件夹外新建一个vue.config.js的文件夹，名字必须是这个，不能有错

module.exports = {
	devServer: {
		port: 9000,
		proxy: {
			'/api': {
				target: 'http://localhost:3000/',
				changeOrigin: true,
				pathRewrite: {
					'/api': ''
				}
			},
		}
	}
}