前端跨域的几种解决办法

最新推荐文章于 2023-09-08 22:46:10 发布
最新推荐文章于 2023-09-08 22:46:10 发布
阅读量407 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dasiy_j/article/details/96132497
版权

   关于前端跨域问题用的最多的应该是cors，关于jsonp主要用于get请求，前端代理也仅适用于开发阶段，上线阶段还是要后台配置跨域问题。

   今天主要介绍下面三种，会配合nodejs一起呈现

1.jsonp （主要用于get请求，原理是利用script标签可以请求不同域）

  jsonp需要前后端配合，约定回调函数的名字，我是在3000的端口下请求3001的服务器，下面直接看代码

前端(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="name">
</ul>
<script>

    request()

    function request() {
        var
            js = document.createElement('script'),
            head = document.getElementsByTagName('head')[0];
        js.src = 'http://localhost:3001/api/users?callback=userAdd';
        head.appendChild(js);
    }

    function userAdd(data) {
        document.getElementById("name").innerHTML = data.map((item) => {
            console.log(item)
            return `<li>${item.name}</li>`
        }).join('')
    }
</script>
</body>
</html>

nodejs（3001服务器代码）

const http = require("http")
const fs = require('fs')
const qs = require('querystring')
const URL = require('url')
const users = [
    {
        name: 'jackie',
        age: 27
    },
    {
        name: 'Tom',
        age: 20
    }

]
const server = http.createServer((req, res) => {
    const {url, method} = req;
    const{callback} = URL.parse(req.url,true).query//需要使用nodejs的url模块序列化参数
    console.log(callback)
    if (callback) {//判断传递参数的回调

        res.writeHead(200, {'Content-Type': 'text/javascript'})
        res.end(callback+`(${JSON.stringify(users)})`);//把获取的函数名和要传递的数据拼接返回给前端
        //res.end(callback+"("+JSON.stringify(users)+")");
    }
    else {//如果没有传递参数的回调处理
        res.writeHead(200, {'Content-Type': 'application/json'})
        res.end(JSON.stringify(users))
    }
 
})
server.listen(3001)

（3000服务器代码） 

const http = require("http")
const fs = require('fs')
const qs = require('querystring')
const server = http.createServer((req, res) => {
    const {url, method} = req;
    if (url === '/' && method === 'GET') {
    console.log('11')
    fs.readFile('./index.html', (err, data) => {
        if(err) {
            res.writeHead(500, {'Content-Type': 'text/plain'})
            res.end('server error')
            return
        }
        res.writeHead(200, {'Content-Type': 'text/html'})
    res.end(data)
    })
})
server.listen(3000)

2.cors

在说到cors解决跨域之前我们有必要来了解一下简单请求和非简单请求

     满足以下两大条件，就属于简单请求，那么不满足的就是非简单请求了

（1) 请求方法是以下三种方法之一：
    HEAD
    GET
    POST
（2）HTTP的头信息不超出以下几种字段：   
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    post请求的Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

  先来说简单请求的跨域解决，通过3001的服务器访问3000的接口，先上代码
  前端（index.html）(这是一个简单请求，post+Content-Type(application/x-www-form-urlencoded))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://localhost:3000/api/users" method="post">
    <input type="text" name="name">
    <input type="number" name="age">
    <input type="submit" value="新增用户">
</form>

<ul id="name">

</ul>
</body>
</html>

nodejs(3000端口)

const http = require("http")
const fs = require('fs')
const qs = require('querystring')

const users = [
    {
        name: 'jackie',
        age: 27
    },
    {
        name: 'Tom',
        age: 20
    }

]
const server = http.createServer((req, res) => {
    const {url, method} = req;
console.log(url,method)
if (url === '/' && method === 'GET') {
    console.log('11')
    fs.readFile('./index.html', (err, data) => {
        if(err) {
            res.writeHead(500, {'Content-Type': 'text/plain'})
            res.end('server error')
            return
        }
        res.writeHead(200, {'Content-Type': 'text/html'})
    res.end(data)
})

} else if (url === '/api/users' && method === 'GET') {
    console.log('22')
    //用writeHead再加setHeader不行，为什么请去查阅文档
    //res.writeHead(200, {'Content-Type': 'application/json'})
    res.setHeader('Content-Type', 'application/json')
    //简单请求加cors
    res.setHeader('Access-Control-Allow-Origin','http://localhost:3001');
    res.setHeader("Access-Control-Allow-Credentials",true);

    //res.setHeader('Access-Control-Allow-Origin','http://localhost:3001')
    res.end(JSON.stringify(users))
} else if (url === '/api/users' && method === 'POST') {
    //接受请求参数
    let body = []
    req.on('data', (chunk) => {
        console.log(chunk)
    body.push(chunk);
}).
    on('end', () => {
        //数据接收完毕之后把body转换为完整的buffer
        body = Buffer.concat(body).toString();
    const user = qs.parse(body)
    users.push(user);
    res.writeHead(200, {'Content-Type': 'text/plain'})
    res.end('add success!')
})

}else if(method=='OPTIONS' && url=='/api/users'){
    console.log('444')
    res.writeHead(200,{
        "Access-Control-Allow-Origin":"http://localhost:3001",
        "Access-Control-Allow-Headers":"X-Token,content-type",
        "Access-Control-Allow-Methods":"GET,POST,PUT",
        "Access-Control-Allow-Credentials":"true",
    })
    res.end();
}

})
server.listen(3000)

   （3001端口）

const http = require("http")
const fs = require('fs')
const qs = require('querystring')
const URL = require('url')
const server = http.createServer((req, res) => {
    const {url, method} = req;
    if (url === '/' && method === 'GET') {
        fs.readFile('./index.html', (err, data) => {
            if (err) {
                res.writeHead(500, {'Content-Type': 'text/plain'})
                res.end('server error')
                return
            }
            res.writeHead(200, {'Content-Type': 'text/html'})
            res.end(data)
        })
    } 
})
server.listen(3001)

效果图（新增用户成功）

 

非简单请求会先发一个options请求

在node后台加个判断：

else if(method=='OPTIONS' && url=='/api/users'){
    console.log('444')
    res.writeHead(200,{
        "Access-Control-Allow-Origin":"http://localhost:3001",
        "Access-Control-Allow-Headers":"X-Token,content-type",
        "Access-Control-Allow-Methods":"GET,POST,PUT",
        "Access-Control-Allow-Credentials":"true",
    })
    res.end();
}

前端在3001下请求3000的接口

axios.post("http://localhost:3000/api/users",{
        header:{
            'Content-Type':'application/json'
        }
    })
        .then(res=>res.data).then(users=>{
        console.log(users);
        document.getElementById("name").innerHTML=users.map((item)=>{
            console.log(item)
            return `<li>${item.name}</li>`
        }).join('')
    })

效果图

 

 

3.代理

我用的vue-cli3.0，配置vue.config.js的 devServer

devServer: {
        proxy: {
            '/api': {//代理api
                target: "http://ip:port",//服务器api地址
                changeOrigin: true,//是否跨域
                ws: true, // proxy websockets
                pathRewrite: {//重写路径
                    "^/api": ''
                }
            }
        }
    }

 

 

dasiy_j
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前后端分离跨域问题解决方案
ywl470812087的博客
03-21 12万+
问题 　　因为最近在学习vue和springboot.用到了前后端分离.前端webpack打包运行的时候会启动nodejs的服务器占用8080端口,后端springboot自带tomcat启动占用1111端口(我自己设置的)...导致前端请求的ajax到后台会产生跨域问题...然后自己试了试发现有2种办法都可以解决. 利用SpringMVC @CrossOrigin注解 1 pa...
解决跨域常见的几种方式
老曹的博客
06-18 1740
什么是同源策略及限制 同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制 源（origin）：协议 + 域名 + 端口号 同源：相同的协议如：https，相同的域名如 www.baidu.com，相同的端口号80。 下表给出了相对 http://store.company.com/dir/page.html 同源检测的示例: ...
前端项目线上如何做跨域
GreekMrzzJ的博客
01-06 1万+
前端页面被跨域限制了，说明不同源。 这个时候可以找一台跟后台接口同源的服务器用 nginx 来做接口转发。 以一个 vue 项目为例，在开发过程中，开发者可以主动去配合 dev 的 proxyTable， 本质上是本地起了一个 node 服务（express）来做转发到 localhost， 因为跨域是会存在于浏览器。 而发布到线上去之后，很可能由于 dev 环境下对每一个接口请求都携带了 /ap...
git 查看远程地址 与 远程地址的设置
热门推荐
Sunshine_Jian的博客
06-28 2万+
git 查看远程地址 与 远程地址的设置
使用HttpClient远程访问url地址
xzy的博客
09-27 1311
文章目录使用HttpClient远程访问url地址草书具体代码工程 使用HttpClient远程访问url地址 草书 首先需要远程的url地址，其次需要传递的参数，代码如下: public class WorkDayClient { public static void doPostTestTwo() { // 获得Http客户端(可以理解为:你得先有一个浏览器;注意:实际上HttpClient与浏览器是不一样的) CloseableHttpClient httpCl
前端跨域解决方法整理
qq_35413855的博客
08-05 222
前言 跨域行为描述： 跨域发生的位置不是服务端，而是浏览器的一种行为 解决方式 1、方式一 res.setHeader('Access-Control-Allow-Origin','http://localhost:3000') 2、方式二（关于预检请求） if (method == "OPTIONS" && url == "/api/users") { res.setHeader('Access-Control-Allow-Credentials'.
前端的8种跨域解决方案
最新发布
一步一个脚印，踏实努力，向着目标前进
09-08 1214
在前端开发中，常见的跨域解决方案有以下8种： CORS（Cross-Origin Resource Sharing）：通过服务器设置响应头，允许指定的源（域名、协议、端口）进行跨域请求。 反向代理：在服务器端设置一个代理服务器，将前端的请求发送到目标服务器，并将目标服务器的响应返回给前端，从而实现跨域请求。 WebSocket：使用WebSocket协议进行跨域通信，WebSocket协议默认支持跨域请求。 postMessage：通过方法在不同窗口之间进行跨域通信，可以实现跨域数据传递
前端跨域问题解决
hhhhuuul的博客
06-21 3483
当一个请求的url的协议、域名、端口号三者之间任意一个与页面当前的url不同即为跨域。在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能。
前端跨域的几种解决方式总结（推荐）
08-29
前端跨域的几种解决方式总结 同源策略是 JavaScript 中的一种安全策略，由 Netscape 提出的。它规定了 A 网站下的 JS 文件只能操作 A 网站下的数据，不能去操作 B 网站的数据。同源策略是为了防止恶意网站修改银行...
详解JavaScript跨域总结与解决办法
10-21
跨域的几种常见情况包括： 1. 不同域名：如http://www.a.com和http://www.b.com。 2. 不同端口：如http://www.a.com:80和http://www.a.com:8000。 3. 不同协议：如http://www.a.com和https://www.a.com。 4. 主域...
JavaScript 九种跨域方式实现原理
10-17
为了克服这个限制，开发者采用了一系列跨域方法，本篇文章将详细介绍九种常见的跨域解决方案。 1. JSONP(JSON with Padding) JSONP是一种通过动态插入`<script>`标签实现跨域请求的方法。其原理是利用`<script>`...
前端开发中常用的几种跨域解决方案.docx
10-26
【跨域的几种表现】 1. 服务器分开部署：Web服务器与数据请求服务器位于不同的域名下。 2. 本地开发：开发者在本地环境中预览项目，而数据接口位于测试服务器上。 3. 调取第三方平台接口：应用需要从不属于自身域名...
前端跨域问题CORS error
m0_46348803的博客
11-06 1639
前端跨域问题CORS error
前端跨域简单的解决方案
qq_38323658的博客
06-21 293
1.什么是跨域？ 当我们看到控制台出现这么的错误的时候，就知道这个是跨域了。 Access to XMLHttpRequest at。。。。。 它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。 所谓同源是指，域名，协议，端口均相同。说的简单点就是，就是浏览器不能执行其他网站的脚本。什么情况下会出现跨域呢？ 举个例子： http://www.domain.com/a.js http://www.domain.com/b.js 同一域名，不同文件或路径 允许
前端解决跨域问题（9个方法）
weixin_62889848的博客
01-05 1万+
前端解决跨域问题（9个方法）
解决前端跨域的几种方法
greed
08-10 1万+
解决前端跨域的几种方法 了解跨域出现的原因 解决跨域的几种方法 想要解决跨域 先要知道为什么会出现跨域 跨域:指的是浏览器不能执行其他网站的脚本 它是由浏览器的同源策略造成的 是浏览器对javascript添加的安全限制 同源策略是一种约定 是浏览器核心的安全功能 同源策略会造成以下的影响 Cookie、LocalStorage 和 IndexDB 无法读取 DOM 和 JS 对象无法获取 Ajax请求发送不出去 是否同源主要看一下三个方面: 协议是否相同（http https fil
arr.map()
YingDaoMonkey的博客
07-08 1万+
arr.map()— —更新数组1、创建新数组2、不改变原数组3、输出的是return什么就输出什么新数组4、回调函数参数，item(数组元素)、index(序列)、arr(数组本身)5、使用return操作输出，会循环数组每一项，并在回调函数中操作示例： var arr = [1,2,3,4,5] ; var newArr = arr.map(function(item,index){ re...
h5监听手机物理返回键操作--popstate
dasiy_j的博客
03-06 1万+
最近在开发webapp，h5开发的页面嵌入到app中，暂时先是安卓包。因为画面是一个列表页，每条列表会有一个详情页，为了从详情页返回的时候还在当时列表的位置，用了隐藏div的形式编写了详情页。当遇到手机物理返回键的时候，详情页因为和列表页是同一个页面，这个时候就会返回到首页了。这不是我想要的效果，所以要对手机的物理返回键进行监听，在点击时隐藏div回到列表页。h5 $(function()...
CORS解决前端跨域问题
07-27
CORS（跨源资源共享）是一种机制，用于解决前端跨域问题。前端跨域问题指的是浏览器限制了从不同源（域、协议或端口）加载的资源之间的交互。 要解决前端跨域问题，有几种方法可以使用： 1. 服务器端设置响应头：在服务器端，可以设置响应头来允许特定的源访问资源。通过设置`Access-Control-Allow-Origin`响应头，指定允许访问的源。例如，设置为`Access-Control-Allow-Origin: *`表示允许所有源访问资源。 2. JSONP：JSONP（JSON with Padding）是一种通过动态创建`<script>`标签来加载跨域脚本的技术。由于`<script>`标签没有同源策略限制，因此可以加载不同源的脚本。服务器端需要将返回数据包装在函数调用中，并通过回调函数将数据传递给前端。 3. 代理服务器：可以设置一个代理服务器，将前端请求转发到目标服务器，并将响应返回给前端。由于代理服务器和目标服务器在同一个域下，因此不存在跨域问题。 4. WebSocket：使用WebSocket协议可以在浏览器和服务器之间建立双向通信的连接，而不受同源策略限制。 这些方法中，服务器端设置响应头是最常用的解决跨域问题的方法。其他方法在特定场景下也有应用的价值。需要根据具体情况选择适合的方法来解决前端跨域问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值