解决跨域请求的四种方法

跨域

跨域就是请求的url中的“协议”、“域名”、“端口号”其中任何一种不一样都是属于跨域。解决跨域的主要的四种方法是jsonp、跨域资源共享CORS(Cross-Origin Resource Sharing)、proxy代理、webpack中间件。

jsonp解决跨域

jsonp只能解决get方法。
在这里设置两个不同的域名，即http://localhost:3000与http://localhost:3001，端口号不同即为跨域。
为jsonp启动两个不同服务，前端端口号为3000，利用node.js实现，设置代码如下：

const express = require("express");
const app = express();
const path = require("path");
const port = 3000;app.use(express.static(path.join(__dirname, "public")));app.get("/", (req, res) => res.send("Hello World!"));app.listen(port, () => console.log(`3000端口号，启动成功！!`));

后端设置的端口号为3001，代码如下

const express = require('express')
const app = express()
const port = 3001app.get('/test', (req,res)=>{// 接收客户端传递光来的函数名称const params = req.query.callback;// 将函数名称对应的函数调用返回给客户端const fn = params+"({name:'zs'})";res.send(fn)
})
app.listen(port, () => console.log(`3001端口号，启动成功！!`))

分别启动之后，在前端中设置如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button id="btn1">发送请求</button><script>function fn(data) {console.log('客户端的fn被调用了！')console.log(data)}const btn1 = document.querySelector('#btn1');btn1.onclick = function () {jsonp({url: 'http://localhost:3001/test?callback=fn'})}function jsonp(options) {// 动态创建script标签const script = document.createElement('script');// 设置非同源地址script.src = options.url document.body.appendChild(script)// 为script标签添加onload事件，否则每发送一次请求就会在body里添加一个script，最终会导致body中有很多的script标签script.onload = function () {document.body.removeChild(script)}}</script>
</body></html>

运行结果

可以将前端代码封装一下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button id="btn1">发送请求</button><button id="btn2">发送请求</button><script>const btn1 = document.querySelector('#btn1');const btn2 = document.querySelector('#btn2');btn1.onclick = function () {jsonp({url: 'http://localhost:3001/test',// 设置参数data: {name: 'lisi',age: 20},success: function (data) {console.log(123)console.log(data)}})}btn2.onclick = function () {// jsonp({//     url: 'http://localhost:3001/test?callback=fn'// })jsonp({url: 'http://localhost:3001/test',// 设置参数data: {name: 'lisi',age: 20},success: function (data) {console.log(456)console.log(data)}})}function jsonp(options) {// 动态创建script标签const script = document.createElement('script');var params = ""for (let attr in options.data) {params += '&' + attr + "=" + options.data[attr];}// 设置函数名，让每次调用这个函数的时候window都能挂载不同的函数名，解决后端处理的数据是异步的问题，这样就不会覆盖第一次调用了。const fileName = 'myJson' + Math.random().toString().replace('.', '');// 将传递过来的函数变成全局函数// window.fn = options.success;window[fileName] = options.success// 设置非同源地址script.src = options.url + '?callback=' + fileName + params;document.body.appendChild(script)// 为script标签添加onload事件，否则每发送一次请求就会在body里添加一个script，最终会导致body中有很多的script标签script.onload = function () {document.body.removeChild(script)}}</script>
</body></html>

运行结果

CORS解决跨域

在这里，将webpack-dev-server将前端启动的端口号设置为8080，后端的端口号利用node.js设置成3000。
首先下载webpack、webpack-cli、webpack-dev-server、html-webpack-plugin。
package.js文件如下：

{"scripts": {"dev": "webpack-dev-server"},"devDependencies": {"html-webpack-plugin": "^3.2.0","webpack": "^4.39.2","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.2"}
}

webpack.config.js文件配置如下：

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {// 入口entry: './src/index.js',output: {filename: 'index.js',path: path.resolve(__dirname, 'dist'),publicPath: '/' // 资源路径},plugins: [new htmlWebpackPlugin({filename: 'index.html',template: 'index.html'})]
}

前端必须要有一个index.html和src文件夹下的index.js
设置index.js内容：

console.log('log')const xhr = new XMLHttpRequest()
// 设置发送的请求地址时是同源的
xhr.open('get', 'http://localhost:3000/user', true);
xhr.onload = function () {console.log(xhr.responseText)
}
xhr.send()

后端代码设置

const express = require('express')
const app = express()
const port = 3000// CORS:后端解决跨域问题
var allowCrossDomian = function(req,res,next){res.header("Access-Control-Allow-Origin", "*")res.header("Access-Contro-Allowl-Headers", "*")res.header("Access-Control-Allow-Methods", "*")// 必须要要有这个，否则不会执行下面的代码next()
}
app.use(allowCrossDomian)app.get('/user', function(req,res){res.json({name : 'jack'})console.log(123)
})
app.listen(port, () => console.log(`服务端已启动，端口号3000!`))

proxy代理解决跨域

其他不变，只需要在webpack.config.js中添加如下代码即可。

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {// 入口entry: './src/index.js',output: {filename: 'index.js',path: path.resolve(__dirname, 'dist'),publicPath: '/' // 资源路径},// 添加的代码devServer: {proxy: { // 代理 前端解决跨域问题'/api': {target: 'http://localhost:3000',changeOrigin: true,pathRewrite: {'^/api': '' //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可}}}},plugins: [new htmlWebpackPlugin({filename: 'index.html',template: 'index.html'})]
}

修改index.js中的请求路径为：

console.log('log')const xhr = new XMLHttpRequest()
// 设置发送的请求地址时非同源的
// xhr.open('get', 'http://localhost:3000/user', true);
// 设置proxy代理的请求路径
xhr.open('get', '/api/user', true);
xhr.onload = function () {console.log(xhr.response)
}
xhr.send()

webpack中间件解决跨域

首先要下载中间件webpack-dev-middleware
下载的插件如下：

在后端中添加如下代码：

const express = require('express')
const app = express()
const port = 3000// CORS:后端解决跨域问题
// var allowCrossDomian = function(req,res,next){//     res.header("Access-Control-Allow-Origin", "*")
//     res.header("Access-Contro-Allowl-Headers", "*")
//     res.header("Access-Control-Allow-Methods", "*")
//     next()
// }
// app.use(allowCrossDomian)// 中间件，解决跨域问题
const webpack = require('webpack')
const middle = require('webpack-dev-middleware')
const complier = webpack(require('./webpack.config'))
app.use(middle(complier))app.get('/user', function(req,res){res.json({name : 'jack'})console.log(123)
})
app.listen(port, () => console.log(`服务端已启动，端口号3000!`))

以上就是四种方法解决跨域问题，可能讲的不是特别清晰。

解决跨域请求的四种方法相关推荐

解决跨域问题的三种方法
出于安全问题考虑, 都会有跨域限制, 你都不想浏览器在和你的服务器交互时还和别的服务器有联系吧(就好像默认不允许第三者插足). 但如果当前正在交互的服务器都同意了, 那么跨域也就没问题了(一方有这个想 ...
解决“跨域问题”的几种方法
(0)使用注解方式,这个可能有些框架可以,有些不行,在要访问的方法前面加上此注解即可: @CrossOrigin (1)使用 Access-Control-Allow-Origin 设置请求响应头,简 ...
vue 使用axios 出现跨域请求的两种解决方法
vue 使用axios 出现跨域请求的两种解决方法参考文章: (1)vue 使用axios 出现跨域请求的两种解决方法 (2)https://www.cnblogs.com/wangshengli5 ...
AJAX异步请求解决跨域问题的三种方式
一什么是跨域出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说We ...
本地主机作服务器解决AJAX跨域请求访问数据的方法
本地主机作服务器解决AJAX跨域请求访问数据的方法参考文章: (1)本地主机作服务器解决AJAX跨域请求访问数据的方法 (2)https://www.cnblogs.com/QiScript/p/5 ...
跨域请求的三种解决方案
跨域的三种解决方案一.同源策略二.jsonp 三.cors 四.proxy 一.同源策略 xhr对象无法跨域请求文件.通俗讲就是"浏览器"给js发送请求的限制,你只能给自己域名 ...
Ajax 调用webservice 解决跨域请求和发布到服务器后本地调用成功外网失败的问题...
webservice 代码 1 /// <summary> 2 /// MESService 的摘要说明 3 /// </summary> 4 [WebService(Name ...
[转] js前端解决跨域问题的8种方案（最新最全）
[转] js前端解决跨域问题的8种方案(最新最全) 参考文章: (1)[转] js前端解决跨域问题的8种方案(最新最全) (2)https://www.cnblogs.com/chris-oil/p/ ...
前端跨域请求get_解决前端跨域请求的几种方式
利用 JSONP 实现跨域调用说道跨域调用,可能大家首先想到的或者听说过的就是 JSONP 了. 1.1 什么是JSONP JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问 ...

解决跨域请求的四种方法

跨域

jsonp解决跨域

CORS解决跨域

proxy代理解决跨域

webpack中间件解决跨域

解决跨域请求的四种方法相关推荐

最新文章

热门文章