JS-跨域及其处理

最新推荐文章于 2024-09-02 23:36:16 发布

monkeyhlj

最新推荐文章于 2024-09-02 23:36:16 发布

阅读量174

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/hhhmonkey/article/details/118556548

版权

本文详细探讨了JavaScript中遇到的跨域问题，包括CORS跨域配置、Nginx代理解决跨域、JSONP技术以及HTTP协议和封装的相关知识点，旨在提供全面的跨域解决方案。

摘要由CSDN通过智能技术生成

文章目录

- JS-跨域及其处理

JS-跨域及其处理

参考例子：https://blog.csdn.net/hhhmonkey/article/details/118528784

## 跨域多种处理方式
什么是跨域？
浏览器----同源策略----保护
源-----域名 协议 端口(默认端口不显示)
http://www.baidu.com 80
https://www.baidu.com 443
http://www.baidu.com/a  http://www.baidu.com/b
(域名 协议 端口)只要有一个不同表示跨域

## 前端开发模式
主流： 前后分离， 端口不能重复，端口可能不同导致跨域

## 如何解决跨域？
webpack proxy (后面webpack讲)
webpack plugin (后面webpack讲)
jsonp
cors (通过后端， 后端接口允许怎么样请求)
nginx

cors跨域配置

## cors跨域配置(cross-origin resource sharing)
Access-Control-Allow-Origin --- 允许请求源 *---所有 可指定具体地址http://www.baidu.com
Access-Control-Allow-Methods --- 允许请求方法 ---get post put delete options
Access-Control-Allow-Headers --- 允许带的请求头 ---X-Token表示请求时必须有这个头
Access-Control-Allow-Credentials --- 允许带cookie
跨域请求会首先发送options试探请求
特点：
纯后端配置，开发，上线均不影响
谁配置： 后端开发配置

nginx配置

## nginx---中间代理
谁配置：前端，运维，后端
特点：前端可掌握，配置简单，性能高
修改配置文件： nginx\conf\nginx.conf
server---服务器
nginx默认也是跨域---即其它源不可以访问----需要配置nginx的cors
$http_origin---请求源变量---表示是具体的源http://localhost:3000，不是*

需要修改只有：listen端口， proxy_pass跳转地址
配置跨域处理服务器
server {
   
    listen       8089;  #服务端口
    server_name  localhost;  #服务名
    root   html;    #web根目录
    # cors
    add_header Access-Control-Allow-Origin $http_origin always;  # '*' 
    add_header Access-Control-Allow-Credentials true always;
    add_header Access-</