前段跨域 https到http请求

前段 https的站点(https://www.baidu.com) 向http(http://zi.baidu.cn)发送请求


问题1:https安全连接向http非安全连接发送请求

解决方法1:把http修改为https的请求

解决方法2:在后台写一个接口,把前段的请求跳转到后台的接口中, 后台接口再发送http的请求。

问题2:子域名不同   .com和.cn   =>跨域请求

使用jquery的ajax

$.ajax({

url:"http://zi.baidu.cn"+"&callback=fabc",

async:true, //异步请求

dataType:'jsonp',

success: function(data){

原本非跨域请求正常返回值如//:{“code”:"1","msg":"success"}

//跨域请求后,红色字体fabc会在{“code”:"1","msg":"success"}外面 再套一层

//变成  fabc({“code”:"1","msg":"success"})

//fabc是随意的, 可以写?这时,query就会随机给一个数字在返回值中替换了fabc的位置。

}

});

### 解决 Nginx 中前端问题的方法 解决 Nginx 中的前端问题,可以通过配置 CORS(资源共享)来实现。以下是一个完整的配置示例和相关说明: #### 配置示例 ```nginx server { listen 80; server_name api.example.com; location / { # 设置允许名,可以使用通配符 '*' 允许所有访问 add_header 'Access-Control-Allow-Origin' 'http://www.example.com'; # 设置允许的 HTTP 方法 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT'; # 设置允许的请求头 add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, Origin, X-Requested-With'; # 如果需要支持 cookie,可以设置以下 header add_header 'Access-Control-Allow-Credentials' 'true'; # 如果是预检请求(OPTIONS 请求),则直接返回 204 状态码 if ($request_method = 'OPTIONS') { return 204; } # 其他正常请求的处理逻辑 proxy_pass http://backend_server; } } ``` #### 关键配置项详解 - **`add_header 'Access-Control-Allow-Origin' 'http://www.example.com';`** 此配置项用于指定允许访问的源。如果需要允许所有源访问,可以将值设置为 `*`[^1]。 - **`add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';`** 此配置项用于指定允许的 HTTP 方法。根据实际需求,可以调整允许的方法列表[^1]。 - **`add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, Accept, Origin, X-Requested-With';`** 此配置项用于指定允许的自定义请求头。通常包括常见的请求头字段,如 `Content-Type` 和 `Authorization`。 - **`add_header 'Access-Control-Allow-Credentials' 'true';`** 如果需要支持请求中的 Cookie 或其他认证信息,必须启用此选项,并确保 `Access-Control-Allow-Origin` 不设置为 `*`[^1]。 - **`if ($request_method = 'OPTIONS') { return 204; }`** 预检请求(OPTIONS 请求)用于在发送实际请求之前检查服务器是否支持访问。此配置项直接返回 204 状态码以响应预检请求[^1]。 - **`proxy_pass http://backend_server;`** 将请求转发到后端服务。根据实际的后端地址进行配置。 #### 注意事项 - 如果需要处理静态资源的问题,可以在 `location` 块中添加类似的 CORS 配置。 - 确保 Nginx 配置文件语法正确,可以使用 `nginx -t` 命令进行测试[^1]。 - 如果需要支持多个名的访问,可以动态生成 `Access-Control-Allow-Origin` 的值。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值