如何解决跨域问题

JSONP

//获取 input 元素
const input = document.querySelector('input')
const p = document.querySelector('p')

//声明handle函数
function handle(data){
    input.style.border = "1px solid red"
    //修改p标签的文本内容
    p.innerHTML = data.msg
}

//绑定事件
input.onblur = function(){
    //获取用户的输入值
    let username = this.value
    //向服务器发请求，检测用户名是否存在
    // 1.创建script标签
    const script = document.createElement('script')
    // 2.设置script标签的src属性
    script.src = 'http://127.0.0.1:8000/check-username'
    // 3.将 script 插入到文档中
    document.body.appendChild(script)
}

同源策略

直接选择同源,后面还能有个毛的问题~

CORS解决跨域

//1. 引入express
const express = require('express');

//2. 创建应用对象
const app = express();

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头    设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX GET');
});

app.all('/server', (request, response) => {
    //设置响应头    设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send('HELLO AJAX POST');
});

app.all('/json-server', (request, response) => {
    //设置响应头    设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'puppet'
    };
    // 对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

//针对ie
app.get('/ie', (request, response) => {
    //设置响应头    设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO IE');
});

//延时响应
app.get('/delay', (request, response) => {
    //设置响应头    设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    setTimeout(() => {
        //设置响应体
        response.send('延时响应');
    }, 3000);
});

//jQuery服务
app.all('/jQuery-server', (request, response) => {
    //设置响应头    设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    // response.send('jQuery and AJAX');
    const data = { name: 'puppet' };
    response.send(JSON.stringify(data));
});

//axios服务
app.all('/axios-server', (request, response) => {
    //设置响应头    设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    const data = { name: 'puppet' };
    response.send(JSON.stringify(data));
});

//fetch服务
app.all('/fetch-server', (request, response) => {
    //设置响应头    设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    const data = { name: 'puppet' };
    response.send(JSON.stringify(data));
});

//jsonp服务
app.all('/jsonp-server', (request, response) => {
    const data = { name: 'puppet' };
    let str = JSON.stringify(data)
    response.end(`handle(${str})`)  /* 通过服务端响应JS代码 */
});

//username服务
app.all('/check-username', (request, response) => {
    const data = {
        exist:1,
        msg:'用户名已存在'
    };
    let str = JSON.stringify(data)
    response.end(`handle(${str})`)  /* 通过服务端响应JS代码 */
});

//jquery-jsonp-server服务
app.all('/jquery-jsonp-server', (request, response) => {
    const data = {
        name:'puppet',
        address:['北京','深圳','上海']
    };
    let str = JSON.stringify(data)
    //接收callback参数
    const cb = request.query.callback
    response.end(`${cb}(${str})`)  /* 通过服务端响应JS代码 */
});

//cors服务
app.all('/cors-server',(req,res)=>{
    //设置请求头
    res.setHeader('Access-Control-Allow-Origin','*')
    res.setHeader('Access-Control-Allow-Headers','*')
    res.setHeader('Access-Control-Allow-Method','*')
    // res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5000')
    res.send('hello cors')
})

//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000 端口监听中....");
});

PS:现在的前端工程化框架基本都能实现自己发给同源的server,再由前端服务端发给后端服务端了。