nginx解决请求跨域问题

首先这里我写了一个接口
我们直接粘贴在浏览器地址上是可以正常返回数据的
在这里插入图片描述
但我们通过html的ajax访问http://localhost:8081/user/1时
就会出现跨域的报错

我们可以选择用nginx进行一个代理可以下载我的资源
nginx解决跨域案例
下载后放到任意目录下改个英文名字中文路径是有问题的
打开它之后打开里面的 conf 用任意编辑器打开里面的 nginx.conf
参考代码如下


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    
    
    worker_connections  1024;
}


http {
    
    
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
    
    
        listen 8080;
        server_name localhost;
        location / {
    
    
            root D:\htmlSer;
        
        }
        location ^~/pro-api/ {
    
    
            proxy_pass http://localhost:8081/;
            # rewrite ~/pro-api/(.x)s /sl break;
        }
    }
}

里面这里我们意思是当你访问 http://localhost:8080/pro-api 时代理会指向 http://localhost:8081/

而当你访问 http://localhost:8080/ 时系统会自动去访问 D盘下的htmlSer目录下的 index.html文件
对应的配置相信不难看出来可以按自己的情况许修改这个文件

这时我们就可以前端直接把代码写在 d盘下的htmlSer下的 index.html
然后 index.html 发请求去请求 http://localhost:8080/pro-api

index.html参考代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let xhr = new XMLHttpRequest()
        xhr.open("get","http://localhost:8080/pro-api/user/1",true);
        xhr.onreadystatechange = function(){
      
      
            if(xhr.readyState == 4){
      
      
                if(xhr&&xhr.responseText&&xhr.responseText&&JSON.parse(xhr.responseText)["code"] == 200){
      
      
                    alert("返回成功");
                }
            }
        }
        xhr.send(null);
    </script>
</body>
</html>

然后再次打开 nginx解决跨域案例
点击下面的nginx.exe 启动代理

在这里插入图片描述

然后我们打开浏览器直接访问 http://localhost:8080/

系统自动代理将http://localhost:8080/转到了 D盘下的htmlSer下的index.html
而我们在 index.html中写请求了http://localhost:8080/pro-api/user/1
代理到了 http://localhost:8081/user/1 下
在这里插入图片描述

当然一些手脚尾框架搭起来的项目也可以

例如你一个 vue/react项目启动使用了系统的 http://localhost:8082/

那么 nginx.conf文件参考代码如下


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    
    
    worker_connections  1024;
}


http {
    
    
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
    
    
        listen 8080;
        server_name localhost;
        location / {
    
    
            proxy_pass http://localhost:8082/;     
        
        }
        location ^~/pro-api/ {
    
    
            proxy_pass http://localhost:8081/;
            # rewrite ~/pro-api/(.x)s /sl break;
        }
    }
}

这样当你访问 http://localhost:8080/ 时它就会给你转到http://localhost:8082/上去

nginx解决请求跨域问题

猜你喜欢