跨域解决方式总结

最新推荐文章于 2023-03-07 13:59:14 发布
最新推荐文章于 2023-03-07 13:59:14 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36570464/article/details/117871294
版权

我的笔记原文地址：https://www.yuque.com/bubbletg/qd/bxh5ge

解决跨域问题的几种方案

  1. jsonp
  2. cors
  3. document.domain
  4. location.hash
  5. window.name
  6. postMessage
  7. websocket
  8. Nginx
  9. http-proxy-middleware

jsonp

jsonp是json with padding 的缩写，他不属于Ajax请求，但它可以模拟ajax请求。

前提：

  • ‘<script> ’标签可以绕过跨域限制
  • 服务器可以任意动态拼接数据返回

实现：

  1. 将不同源的服务器端请求地址写在src属性中
<script src='ww.test.com'></script>
<script src='ww.test1.com'></script>
  1. 服务端相应数据是一个函数调用，发给客户端的数据需要作为函数的参数。
const data = 'fu({name:"nihao",age:"20"})'
res.send(data);
  1. 客户端全局作用域下定义函数 fn
  2. 对数据进行处理

封装jsonp:

function jsonp(options){
     // 创建script 标签
    let script = document.createElement('script'); 
    // 生成随机函数名
    let fnName = `jsonp${Math.random().toString().replace('.','') + Date.now()}` ;
    Window[fnName] = options.success;
    // 参数
    let params = '';
    for(let attr in options.data){
        params = `${params}$${attr}=${options.data[attr]}`
    }
    script.src =  `${options.url}?callback${fnName}${params}`
    document.body.appendChild(script)
    script.onload = function(){
        document.body.removeChild(this)
    }    
 }

CORS

CORS.xmind

详情参考：http://www.ruanyifeng.com/blog/2016/04/cors.html

CORS全程是Cross origin resource sharing,即跨域资源共享，它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

一：简介

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

二、两种请求

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时满足以下两大条件，就属于简单请求。

（1) 请求方法是以下三种方法之一：

  • HEAD
  • GET
  • POST

（2）HTTP的头信息不超出以下几种字段：

  • Accept -浏览器可接收的数据格式
  • Accept-Language -浏览器可接收的语言
  • Content-Language --服务端发送的语言类型
  • Last-Event-ID
  • Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

这是为了兼容表单（form），因为历史上表单一直可以发出跨域请求。AJAX 的跨域设计就是，只要表单可以发，AJAX 就可以直接发。

凡是不同时满足上面两个条件，就属于非简单请求。

浏览器对这两种请求的处理，是不一样的。

三、简单请求

3.1 基本流程

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。

下面是一个例子，浏览器发现这次跨源AJAX请求是简单请求，就自动在头信息之中，添加一个Origin字段。

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

上面的头信息中，Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

 

如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。

如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

上面的头信息之中，有三个与CORS请求相关的字段，都以Access-Control-开头。

（1）Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

（2）Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

（3）Access-Control-Expose-Headers

该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。

3.2 withCredentials 属性

上面说到，CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段。

Access-Control-Allow-Credentials: true

另一方面，开发者必须在AJAX请求中打开withCredentials属性。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。

但是，如果省略withCredentials设置，有的浏览器还是会一起发送Cookie。这时，可以显式关闭withCredentials。

xhr.withCredentials = false;

需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

四、非简单请求

4.1 预检请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

下面是一段浏览器的JavaScript脚本。

var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();

上面代码中，HTTP请求的方法是PUT，并且发送一个自定义头信息X-Custom-Header。

浏览器发现，这是一个非简单请求，就自动发出一个"预检"请求，要求服务器确认可以这样请求。下面是这个"预检"请求的HTTP头信息。

OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。

除了Origin字段，"预检"请求的头信息包括两个特殊字段。

（1）Access-Control-Request-Method

该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。

（2）Access-Control-Request-Headers

该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。

4.2 预检请求的回应

服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

上面的HTTP回应中，关键的是Access-Control-Allow-Origin字段，表示http://api.bob.com可以请求数据。该字段也可以设为星号，表示同意任意跨源请求。

Access-Control-Allow-Origin: *

如果服务器否定了"预检"请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出如下的报错信息。

XMLHttpRequest cannot load http://api.alice.com.
Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.

服务器回应的其他CORS相关字段如下。

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

（1）Access-Control-Allow-Methods

该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

（2）Access-Control-Allow-Headers

如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

（3）Access-Control-Allow-Credentials

该字段与简单请求时的含义相同。

（4）Access-Control-Max-Age

该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

4.3 浏览器的正常请求和回应

一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

下面是"预检"请求之后，浏览器的正常CORS请求。

PUT /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

上面头信息的Origin字段是浏览器自动添加的。

下面是服务器正常的回应。

Access-Control-Allow-Origin: http://api.bob.com
Content-Type: text/html; charset=utf-8

上面头信息中，Access-Control-Allow-Origin字段是每次回应都必定包含的。

五、与JSONP的比较

CORS与JSONP的使用目的相同，但是比JSONP更强大。

JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

document.domain

默认情况下，document.domain存放的是载入文档的服务器的主机名，可以手动设置这个属性，设置该属性有两个特点：

  1. 只能设置成当前域名，或者当前域的二级域名（比如document.domain为 www.baidu.com，可以设置成 baidu.com）
  2. 任何对document.domain的赋值操作，包括 document.domain = document.domain 都会导致端口号被重写为 null

通过这两个特点，我们就可以实现二级域名相同的不同域之间的跨域dom访问（就算端口不同也可以）

相同二级域名之间的跨域

举个例子：

http://www.qq.com的document.domain为"qq.com"，http://id.qq.com的document.domain为"id.qq.com"，默认情况下，id.qq.com是无法对www.qq.com进行跨域操作的：

image.png

但是，如果通过将document.domain设置成"qq.com"就不同了：

image.png

location.hash

window.location 只读属性，返回一个Location对象，其中包含有关文档当前位置的信息。**window.location : 所有字母必须小写！**只要赋给 location 对象一个新值，文档就会使用新的 URL 加载，就好像使用修改后的 URL 调用了window.location.assign()一样。需要注意的是，安全设置，如 CORS（跨域资源共享），可能会限制实际加载新页面。

 

案例：a、b同域,c单独一个域。a现在想访问c：a通过iframe给c传一个hash值，c收到hash值后再创建一个iframe把值通过hash传递给b,b将hash结果放到a的hash值中。

// a.html
<iframe src="http://localhost:4000/c.html#iloveyou"></iframe>
<script>
//接收b传来的hash值
window.onhashchange = function(){
    console.log(location.hash)
}
</script>
// c.html
<script>
//接收a传来的hash值
console.log(location.hash)
//创建一个iframe，把回复的消息传给b
let iframe = document.createElement('iframe');
iframe.src='http://localhost:3000/b.html#idontloveyou';
document.body.appendChild(iframe);
</script>
//b.html
<script>
//a.html引的c, c又引的b,所以b.parent.parent即是a
window.parent.parent.location.hash = location.hash
</script>

window.name

在页面在浏览器端展示的时候，我们总能在控制台拿到一个全局变量window，该变量有一个name属性，其有以下 特征：

  1. 每个窗口都有独立的window.name与之对应；
  2. 在一个窗口的生命周期中（被关闭前），窗口载入的所有页面同时共享一个window.name，每个页面对window.name都有读写的权限；
  3. window.name一直存在与当前窗口，即使是有新的页面载入也不会改变window.name的值；
  4. window.name可以存储不超过2M的数据，数据格式按需自定义。

postMessage

对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

window.postMessage() 方法被调用时，会在所有页面脚本执行完毕之后（e.g., 在该方法之后设置的事件、之前设置的timeout 事件,etc.）向目标窗口派发一个MessageEvent消息。

语法：otherWindow.postMessage(message, targetOrigin, [transfer]);

  • otherWindow:指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口;
  • message 属性是要发送的消息，类型为 String、Object (IE8、9 不支持)；
  • targetOrigin:属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。
  • transfer:是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

message属性有：

  • data 属性为 window.postMessage 的第一个参数；
  • origin 属性表示调用window.postMessage() 方法时调用页面的当前状态；
  • source 属性记录调用 window.postMessage() 方法的窗口信息;

案例：a.html 给b.html发消息

// a.html
<iframe src="http://localhost:4000/b.html" id="frame" onload="load()"></iframe>
<script>
function load(params){
    let frame = document.getElementById('frame');
    //获取iframe中的窗口,给iframe里嵌入的window发消息
    frame.contentWindow.postMessage('hello','http://localhost:4000')
    // 接收b.html回过来的消息
    window.onmessage = function(e){
        console.log(e.data)
    }
}
</script>


// b.html
<script>
//监听a.html发来的消息
window.onmessage = function(e){
    console.log(e.data)
    //给发送源回消息
    e.source.postMessage('nice to meet you',e.origin)
}
</script>

websocket

WebSocket对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。它是基于TCP的全双工通信,即服务端和客户端可以双向进行通讯，并且允许跨域通讯。基本协议有ws://(非加密)和wss://(加密)

//socket.html
let socket = new WebSocket('ws://localhost:3000');
// 给服务器发消息
socket.onopen = function() {
    socket.send('hello server')
}
// 接收服务器回复的消息
socket.onmessage = function(e) {
    console.log(e.data)
}
// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws');//npm i ws
// 设置服务器域为3000端口
let wss = new WebSocket.Server({port:3000});
//连接
wss.on('connection', function(ws){
    // 接收客户端传来的消息
    ws.on('message', function(data){
        console.log(data);
        // 服务端回复消息
        ws.send('hello client')
    })
})

Nginx

Nginx (engine x) 是一个高性能的HTTP和反向代理服务器，也是一个IMAP/POP3/SMTP服务器。

案例：在nginx根目录下创建json/a.json，里面随便放些内容

// client.html
let xhr = new XMLHttpRequest;
xhr.open('get', 'http://localhost/a.json', true);
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 ){
            console.log(xhr.response);
        }
    }
}

// server.js
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(3000);

// nginx.conf
location / {// 代表输入/时默认去打开root目录下的html文件夹
    root html;
    index index.html index.htm;
}
location ~.*\.json{//代表输入任意.json后去打开json文件夹
    root json;
    add_header "Access-Control-Allow-Origin" "*";
}

http-proxy-middleware

NodeJS 中间件 http-proxy-middleware 实现跨域代理，原理大致与 nginx 相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置 cookieDomainRewrite 参数修改响应头中 cookie 中的域名，实现当前域的 cookie 写入，方便接口登录认证。

  • vue框架：利用 node + webpack + webpack-dev-server 代理接口跨域。在开发环境下，由于 Vue 渲染服务和接口代理服务都是 webpack-dev-server，所以页面与代理接口之间不再跨域，无须设置 Headers 跨域信息了。
module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.proxy2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 当代理某些 https 服务报错时用
            cookieDomainRewrite: 'www.domain1.com'  // 可以为 false，表示不修改
        }],
        noInfo: true
    }
}
  • 非vue框架的跨域（2 次跨域）
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nginx跨域</title>
</head>
<body>
    <script>
        var xhr = new XMLHttpRequest();
        // 前端开关：浏览器是否读写 cookie
        xhr.withCredentials = true;
        // 访问 http-proxy-middleware 代理服务器
        xhr.open('get', 'http://www.proxy1.com:3000/login?user=admin', true);
        xhr.send();
    </script>
</body>
</html>
// 中间代理服务器
var express = require("express");
var proxy = require("http-proxy-middleware");
var app = express();
app.use(
    "/",
    proxy({
        // 代理跨域目标接口
        target: "http://www.proxy2.com:8080",
        changeOrigin: true,
        // 修改响应头信息，实现跨域并允许带 cookie
        onProxyRes: function(proxyRes, req, res) {
            res.header("Access-Control-Allow-Origin", "http://www.proxy1.com");
            res.header("Access-Control-Allow-Credentials", "true");
        },
        // 修改响应信息中的 cookie 域名
        cookieDomainRewrite: "www.proxy1.com" // 可以为 false，表示不修改
    })
);
app.listen(3000);
// 服务器
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.proxy2.com;HttpOnly" // HttpOnly：脚本无法读取
    });
    res.write(JSON.stringify(params));
    res.end();
});
server.listen("8080");

参考文章：

跨域资源共享 CORS 详解

跨域总结

DOM跨域的三种解决方案：document.domain、window.name、window.postMessage

 

bubbleTg
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解JavaScript跨域总结与解决办法
10-21
本篇文章主要介绍了JavaScript跨域，详细的总结了什么是跨域，并介绍了几种解决办法，感兴趣的小伙伴们可以参考一下。
js跨域访问解决方案总结
12-15
js跨域访问解决方案总结，不同域名下cookie相互操作
前端跨域的几种解决方式总结（推荐）
08-29
主要介绍了前端跨域的几种解决方式，详细介绍了同源策略并同时给出了跨域的五种解决方案，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
vue跨域解决方案之--proxy代理
weixin_38724114的博客
11-21 4809
声明一个名为axiostest.js 的文件 //引入axios import axios from 'axios'; //创建一个axios export let axios1 = axios.create({ //设置baseURL是为了之后做代理 baseURL: '/api1', timeout: 5000 }); //创建一个axios export let axios2 = axios.create({ baseURL: '/api2', timeout: 5000 })
webpack-dev-server 代理解决cookie丢失问题
weixin_34235105的博客
03-06 3347
问题 最近项目对接口进行安全改造,需要用到一个Path=/XXX/的cookie值,但是本地开发环境会出现cookie丢失的问题,因为本地开发环境目录都是http://localhost:8000/home,不会包含XXX路径,这样请求就会丢失用于安全的cookie. 解决方案 最简单粗暴的解决方案 修改项目目录,添加一个XXX的文件夹，把开发环境的需要的静态资源和页面文件放到XXX文件夹下，开发...
浏览器原理 - 同源策略和跨域
小陈的博客
11-09 878
跨域问题其实就是浏览器的同源策略造成的。下表给出了与 URL 的源进行对比的示例:同源策略：protocol（协议）、domain（域名）、port（端口）三者必须一致。**同源政策主要限制了三个方面：同源政策的目的主要是为了保证用户的信息安全，它只是对 js 脚本的一种限制，并不是对浏览器的限制，对于一般的 img、或者script 脚本请求都不会有跨域的限制，这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。下面是MDN对于CORS的定义：CORS需要浏览器和服务器同时支持，整个CORS
9种常见的前端跨域解决方案（详解）
热门推荐
zh0623的博客
03-25 2万+
文章转载自：9种常见的前端跨域解决方案（详解）_慕课手记 (imooc.com) 一、什么是跨域？   在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。 什么是同源策略？   同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。   同源策略限
vue-cli 与 axios 跨域的cookie配置，教你摆脱后端依赖
03-08 5535
写在前面 某天，某人正在认真的写 bug 突然，线上环境有个问题，测试环境无法复现。测试说，莫得办法，连上线上环境自己搞下？ 某人：那不就跨域了吗？？ 赶紧翻翻 vue-cli 的跨域咋配置的？ module.exports = { devServer: { proxy: { '/api': { target: '<url>', ws: true, changeOrigin: true }, '/fo
使用http-proxy-middleware中间件代理请求实现跨域方法
叹之
10-12 2327
跨域 跨域是对前端而言的，是浏览器为了网络安全而作出的网络请求限制 当请求不在当前host:port时，属于跨域请求，会被浏览器阻止 当项目属于前后端分离的项目时，前端代码和后端代码通常不运行在同一个端口，甚至不在同一台主机上。为了使前端能够请求后端提供的接口，需要使用跨域技术 http-proxy-middleware 跨域原理示意图 使用方法 – 创建文件夹demo, 运行npm init -y 初始化node项目(首先确保计算机中安装了node.js) – 安装依赖 npm install h
跨域问题及解决方案
slxysyka的博客
01-19 2513
(原因: CORS 头缺少'Access-Control Allow-Origin') 。状态码: 200 跨域产生的问题及解决方案
跨域解决方案（9种）
weixin_51225684的博客
03-07 2636
说起跨域，就要知道什么是浏览器如果以上三项，有一项不同都涉及到跨域问题。
前端开发跨域问题解决
weixin_43299180的博客
05-08 1646
一、什么是跨域 跨域是指没有建立信任关系的两个域之间进行通讯，出于安全考虑，浏览器默认是禁止的。跨域问题其实是浏览器的同源策略引起的。 同源策略是一种约定，也是浏览器最核心最基本的安全功能；如果缺少同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所谓的同源是指：协议、域名、端口 三者都相同。如果有一个不同就是不同源，也就属于跨域。 同源策略限制了下面几种行为： cookie、localStorage、indexDB 无法读取 DOM 和 JS 对象无法获取 AJAX 请求无法发送 二、跨域问题
前端常见跨域解决方案（全）
Jack_zengzhen的博客
12-25 3249
前端常见跨域解决方案（全）什么是跨域？指一个域下的额文档和脚本试图请求另一个域下的资源。浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。 http://        www           .    abc.com      :         8080    /        script/jquery.js协议            子域名             ...
正确使用cookie中的domain
ogog123的博客
08-16 3300
domain的含义为域 假设有两个域名 a.b.e.f.com.cn  以下用域名1指代此域名 c.d.e.f.com.cn   以下用域名2指代此域名 在域名中，所有域名进行分级，也就是说域名1与域名2都是f.com.cn的子域名，f.com.cn又是com.cn的子域名 在域名1所使用的服务中，可以设置域名 a.b.e.f.com.cn b.e.f.com.cn e.f.com
使用Vue-cli 3.0搭建Vue项目
A_wyman的博客
02-26 433
Vue CLI介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 搭建交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 可以通过项...
webpack proxy的代理、抓包、跨域、重写代理路径、改头信息、webSocket（前后端分离必备）
谢泽的网络日志
12-24 1万+
在用vue做了3年前后端分离之后（通过anyproxy做代理），才发现webpack自带更方便的代理 配置文件 找到文件/config/index.js 在proxyTable选项增加下面的配置，可配置多个不同的代理 proxyTable: { '/dev': { target: 'http://www.baidu.com:80', chan...
webpack：proxy中cookie无法保存的解决办法
weixin_43160044的博客
07-06 3670
这几天做个小项目遇到了跨域问题，于是就用了webpack的proxy解决，用的挺爽的，但是做到登录之后，因为服务端使用cookie和sessionid做登录状态保存的，结果就悲催了，我发现它没有将cookie保存起来，简单来说就是我们本地用的是localhost，与我们跨域所用的域名对不上，网上看了下几位大神的博客都对我的项目没有什么作用，于是我又看了下http-proxy-middleware的...
解决its domain attribute was invalid with regards to the curent host url
Juli的博客
08-10 1606
背景 webpack+vue项目做本地测试localhost跨域proxy时，遇到登陆成功且浏览器塞入cookie但是cookie确带不过去，set-cookie有warning显示This set-cookie was blocked because its domain attribute was invalid with regards to the curent host url。 修改cookieDomainRewrite来解决 devServer: { port: port,
gateway 解决跨域
最新发布
07-28
跨域是指在浏览器中，当一个页面的脚本试图访问不同源（域、协议或端口）的资源时，会受到同源策略的限制。为了解决跨域问题，可以使用网关（gateway）来作为中间层进行请求转发和代理。 一种常见的解决方案是使用反向代理网关。反向代理网关将客户端的请求转发到目标服务器，并将响应返回给客户端，使得客户端认为请求是从同源发起的。这样，浏览器就不会因为跨域而拒绝响应。 另一种常见的解决方案是使用JSONP（JSON with Padding）。JSONP利用<script>标签的src属性没有跨域限制的特性，在页面中动态创建一个<script>标签，并通过该标签加载一个包含回调函数的远程脚本文件。服务器在返回的脚本文件中调用回调函数，并将数据作为参数传递给回调函数，从而实现跨域通信。 还有一种解决方案是使用CORS（跨域资源共享）。CORS是一种基于HTTP头部的机制，允许服务器声明哪些源可以访问其资源。客户端发送跨域请求时，服务器可以通过添加特定的响应头来声明是否允许该请求。 总结来说，通过反向代理网关、JSONP或CORS等方式，可以解决跨域问题，实现不同源之间的数据交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值