跨域出现的原因

• 协议(http,https等)
• 域名(例baidu.com)

• 端口(:8080/3000等等)
  协议不同，域名不同，端口不同都会出现跨域的情况

  例1 协议不同

  http://baidu.com:8080
  https://baidu.com:8080

例2 域名不同

http://172.0.0.1:8080
https://172.0.0.2:8080

例3 端口不同

http://baidu.com:8080
http://baidu.com:8081
总结：只要这三个中存在任意一个不一样，就会出现跨域情况

解决跨域的方法

jsonp

利用script标签不受跨域的影响来实现

原生的形式

jquery ajax的形式

$.ajax({
    url: '请求地址',
    type: 'get或者post',
    dataType: 'jsonp',  // 解决跨域的重点这里写成jsonp
    jsonpCallback: "callback",    //回调函数
});

vue形式

实例化vue对象上绑定$jquery

vue.$jquery.jsonp('请求地址',{
    ...,
    jsonp:'自定义回调函数'
}).then(function(result){
    console.log(result);
})

iframe跨域

通过iframe的src属性来获取数据

<iframe src="https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist" frameborder="0"></iframe>

路由解决跨域

const express = require("express");
const app = express();
app.all("*", function (req, res, next) {
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin", "*");
    next();
})

路由级别设置跨域

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

跨域资源共享（CORS）

##先引入express
const express = require("express");
##引入cors
const cors = require("cors");
##实例化express
const app = express();
##解决跨域
app.use(cors());//解决问题的关键

Nginx代理跨域

1. 下载nginx
2. 寻找文件
   nginx.conf

3. location下配置

   location / {
     add_header Access-Control-Allow-Origin *;
   }

   Nginx反向代理跨域

   server {
    listen       81; # 监听的端口
    server_name  localhost; #监听的主机名 也可以是域名或者ip地址
    location / {
        proxy_pass   需要跨域的地址;  #反向代理
    }
   }

   vue.config.js（vue2）

   module.exports = {
     dev: {
    proxyTable: { // 配置跨域
    '/api':{
        target:`接口`, //请求后台接口
        changeOrigin:true, // 允许跨域
        pathRewrite:{
            '^/api' : '' // 重写请求
        }
    }
     }

   vue.config.js (vue3)

   module,exports = {
    devServer: {
        proxy: {
            '/api': {
                target: `接口地址`, //接口域名,端口看各自设置的
                changeOrigin: true,             //是否跨域
                ws: true,                       //是否代理 websockets
                secure: true,                   //是否https接口
                pathRewrite: {                  //路径重置
                    '^/api': ''
                }
            }
        }
    }
   }