前端跨域

跨域

跨域就是违反了同源策略 什么是同源策略呢 ，同源策略是由NetScape提出的一个著名的安全策略。最初的 “同源策略”，主要是限制Cookie的访问，这个网页设置的 Cookie，在另一个网页无法访问，除非两个是“同源”的。同源，指的是协议，域名，端口相同，必须三者同时一样，三者缺一者一样都属于跨域
前端如何解决跨域呢

1 设置请求头

const http = require("http");
const sever = http.createServer();
sever.on("request",(req,res)=>{
    res.setHeader("Access-Control-Allow-Origin","*");
    res.setHeader("Access-Control-Allow-Methods","DELETE,PUT,GET,POST,OPTIONS")
    if(req.url == "/get" && req.method == "GET"){
        const data = {
                name : "hwc",
                age : 18
            };
        res.end(JSON.stringify(data))
    }
})
sever.listen(3000)

2node 中间件代理

中间件服务器

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();

app.use('/', proxy({
    // 代理跨域目标接口
    target: 'http://www.demo2.com:8080',
    changeOrigin: true,

    // 修改响应头信息，实现跨域并允许带cookie
    onProxyRes: function(proxyRes, req, res) {
        res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
        res.header('Access-Control-Allow-Credentials', 'true');
    },

    // 修改响应信息中的cookie域名
    cookieDomainRewrite: 'www.demo1.com'  // 可以为false，表示不修改
}));

app.listen(3000);

node 后台

var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    var params = qs.parse(req.url.substring(2));

    // 向前台写cookie
    res.writeHead(200, {
        'Set-Cookie': 'l=a123456;Path=/;Domain=www.demo2.com;HttpOnly'   // HttpOnly:脚本无法读取
    });

    res.write(JSON.stringify(params));
    res.end();
});

server.listen('8080');

3JSONP

动态创建script标签，然后利用script的src 不受同源策略约束来跨域获取数据。

 $.ajax({
            type:"GET",
            url : "http://localhost:3000/jsonp",
            dataType : "jsonp",
            success : function(data){
                console.log(data)
            }
        })

function addScript(src){
            var script = document.createElement("script")
            script.src = src;
            document.body.appendChild(script)
        }
        window.onload = function(){
            addScript("http://localhost:3000/jsonp?callback=fun")
        }
        function fun(data){
            console.log(data)
        }

但是它只能发送get请求