首页 > 资讯 > 精选 >web前端跨域问题怎么解决

415

分享到

web前端跨域问题怎么解决

2023-06-29 03:06:41 415人浏览独家记忆

摘要

本文小编为大家详细介绍“web前端跨域问题怎么解决”，内容详细，步骤清晰，细节处理妥当，希望这篇“WEB前端跨域问题怎么解决”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。为什么跨域？为什么会出现跨域问题呢？那就不

本文小编为大家详细介绍“web前端跨域问题怎么解决”，内容详细，步骤清晰，细节处理妥当，希望这篇“WEB前端跨域问题怎么解决”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

为什么跨域？

为什么会出现跨域问题呢？那就不得不讲浏览器的同源策略了，它规定了协议号-域名-端口号这三者必须都相同才符合同源策略

如有有一个不相同，就会出现跨域问题，不符合同源策略导致的后果有

LocalStorge、SessionStorge、Cookie等浏览器内存无法跨域访问
DOM节点无法跨域操作
ajax请求无法跨域请求

注意点：一个IP是可以注册多个不同域名的，也就是多个域名可能指向同一个IP，即使是这样，他们也不符合同源策略

跨域的时机？

跨域发生在什么时候呢？我考过很多位同学，得到了两种答案

请求一发出就被浏览器的跨域报错拦下来了(大多数人回答)
请求发出去到后端，后端返回数据，在浏览器接收后端数据时被浏览器的跨域报错拦下来

那到底是哪种呢？我们可以验证下，咱们先npm i nodemon -g，然后创建一个index.js，然后nodemon index起一个node服务

// index.js  Http://127.0.0.1:8000const http = require('http');const port = 8000;http.createServer(function (req, res) {    const { query } = urllib.parse(req.url, true);    console.log(query.name)    console.log('到后端喽')    res.end(JSON.stringify('林三心'));}).listen(port, function () {    console.log('server is listening on port ' + port);})

再创建一个index.html，用来写前端的请求代码，咱们就写一个简单的AJAX请求吧

// index.html  http://127.0.0.1:5500/index.html<script>    //步骤一:创建异步对象    var ajax = new XMLHttpRequest();    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数    ajax.open('get', 'http://127.0.0.1:8000?name=前端过来的林三心');    //步骤三:发送请求    ajax.send();    //步骤四:注册事件 onreadystatechange 状态改变就会调用    ajax.onreadystatechange = function () {        if (ajax.readyState == 4 && ajax.status == 200) {            //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的            console.log(ajax.responseText);//输入相应的内容        }    }</script>

最终，前端确实是跨域报错了。但这不是结果，我们要想知道是哪一个答案，关键在于看后端的node服务那里有没有输出，就一目了然了。所以，答案2才是对的。

同域情况 && 跨域情况？

前面提到了同源策略，满足协议号-域名-端口号这三者都相同就是同域，反之就是跨域，会导致跨域报错，下面通过几个例子让大家巩固一下对同域和跨域的认识把！

解决跨域的方案

跨域其实是一个很久的问题了，对应的解决方案也有很多，一起接着往下读吧！！！

JSONP

前面咱们说了，因为浏览器同源策略的存在，导致存在跨域问题，那有没有不受跨域问题所束缚的东西呢？其实是有的，以下这三个标签加载资源路径是不受束缚的

script标签：<script src="加载资源路径"></script>
link标签：<link herf="加载资源路径"></link>
img标签：<img src="加载资源路径"></img>

而JSONP就是利用了script的src加载不受束缚，从而可以拥有从不同的域拿到数据的能力。但是JSONP需要前端后端配合，才能实现最终的跨域获取数据。

JSONP通俗点说就是：利用script的src去发送请求，将一个方法名callback传给后端，后端拿到这个方法名，将所需数据，通过字符串拼接成新的字符串callback(所需数据)，并发送到前端，前端接收到这个字符串之后，就会自动执行方法callback(所需数据)。

后端代码

// index.js  http://127.0.0.1:8000const http = require('http');const urllib = require('url');const port = 8000;http.createServer(function (req, res) {    const { query } = urllib.parse(req.url, true);    if (query && query.callback) {        const { name, age, callback } = query        const person = `${name}今年${age}岁啦！！！`        const str = `${callback}(${JSON.stringify(person)})` // 拼成callback(data)        res.end(str);    } else {        res.end(JSON.stringify('没东西啊你'));    }}).listen(port, function () {    console.log('server is listening on port ' + port);})

前端代码

// index.html  http://127.0.0.1:5500/index.html    const jsonp = (url, params, cbName) => {        return new Promise((resolve, reject) => {            const script = document.createElement('script')            window[cbName] = (data) => {                resolve(data)                document.body.removeChild(script)            }            params = { ...params, callback: cbName }            const arr = Object.keys(params).map(key => `${key}=${params[key]}`)            script.src = `${url}?${arr.join('&')}`            document.body.appendChild(script)        })    }    jsonp('http://127.0.0.1:8000', { name: '林三心', age: 23 }, 'callback').then(data => {        console.log(data) // 林三心今年23岁啦！！！    })

JSONP的缺点就是，需要前后端配合，并且只支持get请求方法

websocket

我理解的WebSocket是一种协议(跟http同级，都是协议)，并且他可以进行跨域通信。

后端代码

先安装npm i ws

// index.js  http://127.0.0.1:8000const Websocket = require('ws'); const port = 8000;const ws = new Websocket.Server({ port })ws.on('connection', (obj) => {    obj.on('message', (data) => {        data = JSON.parse(data.toString())        const { name, age } = data        obj.send(`${name}今年${age}岁啦！！！`)    })})

前端代码

// index.html  http://127.0.0.1:5500/index.html    function myWebsocket(url, params) {        return new Promise((resolve, reject) => {            const socket = new WebSocket(url)            socket.onopen = () => {                socket.send(JSON.stringify(params))            }            socket.onmessage = (e) => {                resolve(e.data)            }        })    }    myWebsocket('ws://127.0.0.1:8000', { name: '林三心', age: 23 }).then(data => {        console.log(data) // 林三心今年23岁啦！！！    })

Cors

Cors，全称是Cross-Origin Resource Sharing，意思是跨域资源共享，Cors一般是由后端来开启的，一旦开启，前端就可以跨域访问后端。

为什么后端开启Cors，前端就能跨域请求后端呢？我的理解是：前端跨域访问到后端，后端开启Cors，发送Access-Control-Allow-Origin: 域名字段到前端（其实不止一个），前端浏览器判断Access-Control-Allow-Origin的域名如果跟前端域名一样，浏览器就不会实行跨域拦截，从而解决跨域问题。

后端代码

// index.js  http://127.0.0.1:8000const http = require('http');const urllib = require('url');const port = 8000;http.createServer(function (req, res) {    // 开启Cors    res.writeHead(200, {        //设置允许跨域的域名，也可设置*允许所有域名        'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',        //跨域允许的请求方法，也可设置*允许所有方法        "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",        //允许的header类型        'Access-Control-Allow-Headers': 'Content-Type'    })    const { query: { name, age } } = urllib.parse(req.url, true);    res.end(`${name}今年${age}岁啦！！！`);}).listen(port, function () {    console.log('server is listening on port ' + port);})

前端代码

// index.html  http://127.0.0.1:5500/index.html    //步骤一:创建异步对象    var ajax = new XMLHttpRequest();    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数    ajax.open('get', 'http://127.0.0.1:8000?name=林三心&age=23');    //步骤三:发送请求    ajax.send();    //步骤四:注册事件 onreadystatechange 状态改变就会调用    ajax.onreadystatechange = function () {        if (ajax.readyState == 4 && ajax.status == 200) {            //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的            console.log(ajax.responseText);//输入相应的内容        }    }

Node接口代理

还是回到同源策略，同源策略它只是浏览器的一个策略而已，它是限制不到后端的，也就是前端-后端会被同源策略限制，但是后端-后端则不会被限制，所以可以通过Node接口代理，先访问已设置Cors的后端1，再让后端1去访问后端2获取数据到后端1，后端1再把数据传到前端

后端2代码

// index.js  http://127.0.0.1:8000const http = require('http');const urllib = require('url');const port = 8000;http.createServer(function (req, res) {    console.log(888)    const { query: { name, age } } = urllib.parse(req.url, true);    res.end(`${name}今年${age}岁啦！！！`)}).listen(port, function () {    console.log('server is listening on port ' + port);})

创建一个index2.js，并nodmeon index2.js

后端1代码

// index2.js  http://127.0.0.1:8888const http = require('http');const urllib = require('url');const querystring = require('querystring');const port = 8888;http.createServer(function (req, res) {    // 开启Cors    res.writeHead(200, {        //设置允许跨域的域名，也可设置*允许所有域名        'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',        //跨域允许的请求方法，也可设置*允许所有方法        "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",        //允许的header类型        'Access-Control-Allow-Headers': 'Content-Type'    })    const { query } = urllib.parse(req.url, true);    const { methods = 'GET', headers } = req    const proxyReq = http.request({        host: '127.0.0.1',        port: '8000',        path: `/?${querystring.stringify(query)}`,        methods,        headers    }, proxyRes => {        proxyRes.on('data', chunk => {            console.log(chunk.toString())            res.end(chunk.toString())        })    }).end()}).listen(port, function () {    console.log('server is listening on port ' + port);})

前端代码

// index.html  http://127.0.0.1:5500//步骤一:创建异步对象    var ajax = new XMLHttpRequest();    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端    ajax.open('get', 'http://127.0.0.1:8888?name=林三心&age=23');    //步骤三:发送请求    ajax.send();    //步骤四:注册事件 onreadystatechange 状态改变就会调用    ajax.onreadystatechange = function () {        if (ajax.readyState == 4 && ajax.status == 200) {            //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的            console.log(ajax.responseText);//输入相应的内容        }    }

Nginx

其实Nginx跟Node接口代理是一个道理，只不过Nginx就不需要我们自己去搭建一个中间服务

先下载nginx，然后将nginx目录下的nginx.conf修改如下:

 server{        listen 8888;        server_name  127.0.0.1;        location /{            proxy_pass 127.0.0.1:8000;        }    }

最后通过命令行nginx -s reload启动nginx

后端代码

// index.js  http://127.0.0.1:8000const http = require('http');const urllib = require('url');const port = 8000;http.createServer(function (req, res) {    const { query: { name, age } } = urllib.parse(req.url, true);    res.end(`${name}今年${age}岁啦！！！`);}).listen(port, function () {    console.log('server is listening on port ' + port);})

前端代码

// index.html  http://127.0.0.1:5500//步骤一:创建异步对象    var ajax = new XMLHttpRequest();    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端    ajax.open('get', 'http://127.0.0.1:8888?name=林三心&age=23');    //步骤三:发送请求    ajax.send();    //步骤四:注册事件 onreadystatechange 状态改变就会调用    ajax.onreadystatechange = function () {        if (ajax.readyState == 4 && ajax.status == 200) {            //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的            console.log(ajax.responseText);//输入相应的内容        }    }

postMessage

场景：http://127.0.0.1:5500/index.html页面中使用了iframe标签内嵌了一个http://127.0.0.1:5555/index.html的页面

虽然这两个页面存在于一个页面中，但是需要iframe标签来嵌套才行，这两个页面之间是无法进行通信的，因为他们端口号不同，根据同源策略，他们之间存在跨域问题

那应该怎么办呢？使用postMessage可以使这两个页面进行通信

// http:127.0.0.1:5500/index.html<body>    <iframe src="http://127.0.0.1:5555/index.html" id="frame"></iframe></body><script>    document.getElementById('frame').onload = function () {        this.contentWindow.postMessage({ name: '林三心', age: 23 }, 'http://127.0.0.1:5555')        window.onmessage = function (e) {            console.log(e.data) // 林三心今年23岁啦！！！        }    }</script>

// http://127.0.0.1:5555/index.html<script>        window.onmessage = function (e) {            const { data: { name, age }, origin } = e            e.source.postMessage(`${name}今年${age}岁啦！！！`, origin)        }</script>