解决跨域问题

---

什么是跨域

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

---

CORS

首先我们先简单的创建一个Node服务器 serer.js
在终端输入 node .\server.js回车启动服务器
如果你没有 node 前往node.js官网根据自己的电脑型号下载，傻瓜式操作，环境变量请自行查找配置！！！

代码如下：

var http = require('http')	
http.createServer((req, res) => {
    res.end('getdata(' + JSON.stringify({ 
        name: '2102A',
        age: 9
    }) + ')')

}).listen(3000)		//3000代表端口号
![在这里插入图片描述](https://img-blog.csdnimg.cn/80213f6fe989490b82c76af65617416c.png#pic_center)
没有报错就说明启动成功了

在浏览器输入http://localhost:3000/ 可以访问我们的服务器的数据：

getdata(
	{
		"name": "2102A",
		"age": 9
	}
)

我们再创建一个Vue项目……
先npm i axios -S 下载axios
在main.js中

import axios from 'axios'
Vue.prototype.$axios = axios
//在Vue的原型上挂载$axios

在Home.vue中的created钩子中通过axios请求3000端口的数据

created(){
	this.$axios.get('http://localhost:3000/').then(res=>{
		console.log(res)
		//这个时候就会出现跨域
	})
}

浏览器控制台打印出
Access to XMLHttpRequest at ‘http://localhost:3000/’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource
这句话的意思就是出现了跨域，这个时候只需要在server.js中加上：

    res.setHeader('Access-Control-Allow-Origin', '*')

Access-Control-Allow-Origin这句话就是允许跨域，*号代表所有
再次在Home组件设置axios请求

 created() {
    this.$axios.get("http://localhost:3000/").then((res) => {
      //  this.data=res.data
      this.list = res.data;

      console.log(res);
    });
  },

这个时候就可以拿到数据了 跨域就是这么简单 这种是后端设置好 前端直接用就行

---

proxy代理

简而言之，代理：就是让别人帮你做，你自己不做
第一步：在根目录下创建一个vue.config.js文件
第二步：在里面写入以下代码：

module.exports = {
    devServer: {
        port: 8081,										//自定义的端口号
        proxy: {										//代理
            '/api': { 									// 代理标识, 如果出现了这个就代表需要代理
                target: 'http://localhost:3000/',		// 要跨域的域名
                changeOrigin: true,						// 是否开启跨域
                pathRewrite: {
                    '^/api': '/api'						//对请求路径进行重定向以匹配到正确的请求地址
                }
            }
        },
    }
}

第三步：在Home组件

  created() {
    this.$axios.get("/api").then((res) => {
      //  this.data=res.data
      this.list = res.data;

      console.log(res);
    });
  },

第四步：数据就出来了

JSONP

转载：点击这里

Nginx代理

	location /api{
        rewrite ^.+api/?(.*)$ /$1 break; 
        include uwsgi_params;
        proxy_pass http://www.****.***/api/*****; 
  	}