跨域的解决方案

跨域的概念

1.“源”由协议、域名、端口号组成
2.两个地址是否同源，取决于 http协议，域名/IP，端口号是否全部一致
3.违反了同源策略的请求就是通常说的跨域请求

一，express使用中间件cors

使用步骤

• 运行npm install cors安装中间件
• 使用const cors = require('cors')导入中间件
• 在路由之前调用app.use(cors())配置中间件

//下包
npm install cors

//配置中间件
var cors = require('cors')
app.use(cors())

app.use((req, res, next) => {//任何请求都会进入这个use中间件 
res.setHeader('Access-Control-Allow-Origin', '*')//设置响应头 
next()//执行下一个中间件  })

开启全局跨域

// 放在所有请求前面
app.all('*',(req,res,next)=>{

 res.header("Access-Control-Allow-Origin", "*");
 res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
 res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
 next()

})

二，jQuery中的jsonp

浏览器：自定义响应回调函数，使用script标签的src请求
利用浏览器的src属性没有跨域这一限制特点
服务器：接收callback参数，返回函数调用
处理复杂，并且只支持get请求
原因：get请求参数直接在url后面拼接，而post请求参数是放在请求体中

dataType:'jsonp'

$.ajax({
        url: 'https://wis.qq.com/weather/common',
        data: {
            source: 'pc',
            weather_type: 'forecast_24h',
            province: '湖北省',
            city: '武汉市'
        },
        dataType: 'jsonp',
        success(res) {
            // console.log(info);
            console.log(res);
            let {
                data: {
                    forecast_24h: info
                }
            } = res
            for (let key in info) {
                // console.log(info[key]);
                let lis = document.createElement('li')
                lis.innerHTML = `<div class="time">${info[key].time}</div>
                <div class="wendu">${info[key].max_degree} </div>
                <div class="tianqi">${info[key].day_weather_short}</div>
                <div class="fengxiang">${info[key].day_wind_power}</div>
                <div class="fengli">${info[key].day_wind_direction}</div>
                    `
                ul.appendChild(lis)
            }
        }
    })