网站推广无锡,番禺网站建设番禺网络营销,公司网站自己可以学习优化吗,上海大型网站制作公几种常见的跨域解决方案代理的概念 一、常见的跨域解决方案1. 服务端配置CORS#xff08;Cross-Origin Resource Sharing#xff09;#xff1a;2. Nginx代理3. Vue CLI配置代理#xff1a;4 .uni-app在manifest.json中配置代理来解决#xff1a;5. 使用WebSocket通讯… 几种常见的跨域解决方案代理的概念 一、常见的跨域解决方案1. 服务端配置CORSCross-Origin Resource Sharing2. Nginx代理3. Vue CLI配置代理4 .uni-app在manifest.json中配置代理来解决5. 使用WebSocket通讯6. H5跨域 JSONP方式通过script标签7. 去掉www前缀8. Chrome浏览器的跨域设置适用于本地临时跨域调试 二、代理的概念 在 Web 开发中跨域问题是指浏览器从一个域名的网页去请求另一个域名的资源时由于同源策略的限制请求会被阻止。 解决跨域问题需要可能从后端、中间件、前端等方向入手。
一、常见的跨域解决方案
1. 服务端配置CORSCross-Origin Resource Sharing
通过在服务器端设置响应头Access-Control-Allow-Origin来允许特定源的跨域请求。 支持多种HTTP方法如GET、POST、PUT、DELETE等。 示例代码PHP
header(Access-Control-Allow-Origin: *);2. Nginx代理
使用 Nginx 设置代理解决跨域问题的一种常见方式。Nginx 会充当一个中间代理服务器接收来自前端的请求并将其转发到实际的后端 API 服务从而避免跨域问题。 在服务器上安装 Nginx 使用以下命令安装Nginx Ubuntu/Debian: sudo apt update
sudo apt install nginxCentOS/RHEL: sudo yum install nginx配置 Nginx 代理 打开 Nginx 的配置文件通常是在 /etc/nginx/nginx.conf 或者 /etc/nginx/sites-available/default根据你的操作系统和 Nginx 安装方式来决定。 下面是一个示例配置假设你的前端应用在 http://localhost:8080后端 API 服务在 http://api.example.com。 server {listen 80;# 前端应用访问的地址server_name localhost;# 代理http://localhost→http://example.comlocation / {root /var/www/html; # 指定前端应用的根目录index index.html index.htm;}# 反向代理分发到不同的后端 API 服务location /api/ {proxy_pass http://api.example.com/; proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}location /websocket/ {proxy_pass http://websocket.example.com/; proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}proxy_pass http://api.example.com/;: 将所有 /api/ 路径的请求转发到 http://api.example.com。proxy_set_header 相关指令用于转发客户端的请求头信息到后端服务器这样后端可以获得真实的请求信息。 重载 Nginx 配置 在修改 Nginx 配置文件后需要重载 Nginx使配置生效 sudo nginx -s reloadCORS 头部如果后端已经配置了 CORS 头部那么你可以在 Nginx 上的代理配置中添加相关的 CORS 头部或者在后端服务中处理
location /api/ {proxy_pass http://api.example.com/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;# CORS 头部add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods GET, POST, OPTIONS;add_header Access-Control-Allow-Headers Origin, X-Requested-With, Content-Type, Accept, Authorization;
}路径重写有时需要在代理时对路径进行重写。例如前端请求 /api但后端实际接收的路径是 /v1/api这时可以使用 rewrite 来修改请求路径
location /api/ {rewrite ^/api/(.*)$ /v1/$1 break;proxy_pass http://api.example.com/;
}3. Vue CLI配置代理
module.exports { devServer: { proxy: { ‘/api’: { target: ‘http://localhost:8818’, changeOrigin: true, pathRewrite: { ‘^/api’: ‘’ } } } } };
4 .uni-app在manifest.json中配置代理来解决
针对uni-app框架 有专门的配置方法。
h5: {devServer: {https: false,port: 8080,proxy: {/apis: {target: https://www.ucharts.cn,changeOrigin: true,pathRewrite: {^/apis: }}}}
}这将把以/apis开头的请求代理到https://www.ucharts.cn从而解决跨域问题。
5. 使用WebSocket通讯
传统的 HTTP 请求会受到同源策略的严格约束而 Websocket 协议不受同源策略的限制。WebSocket通过“ws://(非加密)或“wss://”(加密)协议进行通信连接建立后全双工通信得以实现并且不遵循 HTTP 的同源策略。
6. H5跨域 JSONP方式通过script标签
JSONPJSON with Padding是一种古老的跨域解决方案。 原理是利用 script 标签的src属性不受同源策略限制的特点。 适用于GET请求不适用于POST等其他类型请求。
!DOCTYPE html
html langen head meta charsetUTF-8 titleJSONP跨域示例/title
/head body script function jsonpCallback(data) { console.log(data); } /script script srchttp://目标服务器地址?callbackjsonpCallback/script
/body /html 这里http://目标服务器地址是提供数据的服务器地址callbackjsonpCallback是将回调函数名作为参数传递给服务器服务器收到请求后会将数据包装在回调函数中返回例如返回的数据可能是jsonpCallback([{ name: 张三, age: 25 }])这样前端页面就可以通过回调函数获取到跨域的数据。
7. 去掉www前缀
有些情况下去掉访问地址的www前缀可能会解决跨域问题。这是因为有些服务器配置中www子域名和主域名被视为不同的域。当去掉www前缀后可能会使请求在同源策略下被允许。
例如原本请求www.example.com会出现跨域问题尝试访问example.com 可能就不会有跨域限制。但这种方法并不是通用的解决方案它取决于服务器的具体配置而且也可能带来一些其他问题比如搜索引擎优化SEO方面的影响等。同时如果是因为协议、端口不同导致的跨域这种方法也无法解决。
8. Chrome浏览器的跨域设置适用于本地临时跨域调试
在开发过程中可能需要临时绕过浏览器的同源策略——启动一个禁用Web安全策略的Chrome实例。 请注意这种方法仅适用于开发环境且存在安全风险务必谨慎使用。 通过启动Chrome浏览器时添加特定参数来实现
将谷歌浏览器的桌面快捷方式复制一份右键属性将目标的路径后输入
--disable-web-security --disable-web-security --user-data-dirC:\chromTest参数参考
C:\Program Files\Google\Chrome\Application\chrome.exe --disable-web-security --disable-web-security --user-data-dirC:\chromTest二、代理的概念
常用的代理技术分为正向代理、反向代理和透明代理。 正向代理将多个不同域名的网站请求统一到一个目标服务器请求 反向代理将多个不同域名的网站请求根据需要分发给不同的后端应用服务器 透明代理一种网络中间件它能够在用户不知情的情况下拦截和转发网络流量。这种代理不需要在用户端配置特定的代理设置而是通过在网络层面拦截流量来实现代理功能。
