跨域处理（个人方案 nginx +网络方案）

拼搏现实的明天。 2023-02-11 04:50 13阅读 0赞

## 个人方案 ##

> 目前公司在开发web应用时，普遍采取的是**前后端分离**的方式，将前后端的开发人员开发代码分开，后台使用java语言，前端使用node.js环境，vue语言开发，初期开发使用**mock**数据不依赖后台服务；一个项目评审后各自搭建工程，后端开发接口，前端开发页面，两者互不影响，等到开发完成花几天的时间进行联调，部署发布上线时，前端静态资源放在**CDN**，将编译后的静态html页面提供给后端，部署；好处是解放了前端和后端在一套工程中开发时出现的各种模糊职责，刷锅的问题，调试问题……那后端在整合前端静态html页面时有哪几种方式呢 ？  
> 一种是将html放在后台程序中；一种是另外搭建一个应用只放前端的html页面；还有一种是在nginx服务器上部署；

**nginx反向代理**

nginx是一个反向代理服务器，主要功能为实现负载均衡和动静分离。nginx将 后台本地接口转 发到服务器，前端只要调用动态数据接口，就可以请求到第三方的json数据进行界面的渲染。

**windows下安装nginx**  
参考文档[https://www.cnblogs.com/xishaohui/p/8664814.html][https_www.cnblogs.com_xishaohui_p_8664814.html]  
下载nginx:[http://nginx.org/en/download.html][http_nginx.org_en_download.html] Stable version(稳定版)

双击nginx.exe运行（运行即安装），如果报错：“nginx: \[emerg\] bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)”，说明80端口被占用了，**cmd** ==> **netstat -aon|findstr “80”** 查询谁占了80端口,到任务管理器关闭对应的进程（**tasklist|findstr “80端口对应的任务进程”**），重新双击nginx.exe。  
运行nginx.exe。  
测试http://localhost:端口/ 或者任务管理器可以看到进程

**nginx如何配置可以访问远程主机资源**

> 例如：  
> nginx安装在192.168.64.100上 图片 1.png 在192.168.64.102主机的路径为/tmp/images/1.png  
> 现在需要使用image.xyz.com/images/1.png访问1.png这张图片 。upstream + 代理名字 upstream模块中即指定反向代理的ip跟端口 对应你的应该写192.168.64.100+端口 ftp服务的话是 61 端口 web服务的话是 80 端口。

*  192.168.64.102上需要一台**webservice** 或者**ftp service** 来应答你的文件请求
 *  192.168.64.100 也就是你的nginx服务器， 需要开启反向代理功能， 将请求静态文件的请求分发到192.168.64.102上
 *  nginx反向代理的配置很简单 以下是我的一段代理node.js的配置

http { 
        include       mime.types;
        default_type  application/octet-stream;
        access_log    /var/log/nginx/error.log   combined;
        sendfile        on;
        keepalive_timeout  65;
        gzip  on;
    
        upstream sample { 
           server 127.0.0.1:8000;
        }
    
        server { 
    		server_name server.waji.com;
    		location / {  
    			index index.jsp index.html index.htm; 
    			proxy_redirect off; 
    			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_pass http://servershost;
    		} 
    		error_page   500 502 503 504 /50x.html; 
    		location = /50x.html {  
    			root   html; 
    		} 
    	} 
    
        server { 
            listen 80;             
            server_name supplier.rainbow.com;   
            location / { 
            proxy_pass http://localhost:8081;  #前端项目
          }
          location ~ \.do$ { 
          rewrite ^(.*)$ /supplier$1 break;
          proxy_pass http://localhost:10000; #后台
          }
        }  
    ｝

*  你需修改location后边 ／代表所有类型的请求 假设你只想把png的分发出去 使用正则匹配 \*.png即可
 *  nginx配置文件中有用\#注释的 里面就有匹配规则 如果你能给加上缓存 那样就更好了

nginx提供的反向代理服务很稳定，只要修改下nginx.conf文件就可以，如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70]  
本地调用的服务都走localhost:81这个地址，访问第三方接口可走localhost:81/myhik,访问本地其他资源走localhost:81/即可，最后输入命令nginx -s reload 重新加载下就可以。

//登录
    dologin: function() { 
    	const that = this
    	console.log(that.userAccount,that.userPassword)
    	if(that.empty) { 
    		uni.showToast({ 
    			title: "账号/密码不能为空",
    			icon: "none",
    			duration: 2000
    		})
    		return
    	}
    	util.ajax({ 
    		url: '/system/login.do',
    		data: { 
    			userAccount: that.userAccount,
    			userPassword: that.userPassword
    		},
    		success: function(result) { 
    			const user = result.data.user
    			uni.setStorage({ 
    				key: "useruuid",
    				data: user.useruuid
    			})
    			getApp({ allowDefault: true}).globalData.user = user
    			console.log("用户已登录")
    			that.goyemian()
    		}
    	})
    },

## 网络方案 ##

**方案1.后台更改header**

\#协议跨域  
http://a.baidu.com访问https://a.baidu.com；  
\#端口跨域  
http://a.baidu.com:8080访问http://a.baidu.com:80；  
\#域名跨域  
http://a.baidu.com访问http://b.baidu.com；

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
    header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

**方案2.使用JQuery提供的jsonp**

methods: {  
      getData () {  
        var self = this 
        $.ajax({  
          url: 'http://f.apiplus.cn/bj11x5.json', 
          type: 'GET', 
          dataType: 'JSONP', 
          success: function (res) {  
            self.data = res.data.slice(0, 3) 
            self.opencode = res.data[0].opencode.split(',') 
          } 
        }) 
      } 
    }

**方案3.用http-proxy-middleware 代理解决（vue-cli脚手架搭建）**

例如请求的url:“http://f.apiplus.cn/bj11x5.json”

*  **打开config/index.js,在proxyTable中添写如下代码**  
    此处方法较为传统

proxyTable: {  
      '/api': {   //使用"/api"来代替"http://f.apiplus.c" 
        target: 'http://f.apiplus.cn', //源地址 
        changeOrigin: true, //改变源 
        pathRewrite: {  
          '^/api': 'http://f.apiplus.cn' //路径重写 
          } 
      } 
    }

*  使用axios请求数据时直接使用“/api”：

getData () {  
     axios.get('/api/bj11x5.json', function (res) {  
       console.log(res) 
     })

通过这中方法去解决跨域，打包部署时还按这种方法会出问题。解决方法如下：

let serverUrl = '/api/'  //本地调试时 
    // let serverUrl = 'http://f.apiplus.cn/'  //打包部署上线时 
    export default {  
      dataUrl: serverUrl + 'bj11x5.json' 
    }

\*\*方案4.插件处理~jquery \*\*

1.下载依赖

cnpm install jquery --save-dev

2.在webpack.base.conf.js文件中加入

plugins: [
        new webpack.ProvidePlugin({ 
            $: "jquery",
            jQuery: "jquery"
        })
     ],

3.在需要的temple里引入也可以在main.js里全局引入

import $ from 'jquery'

eg:

<template>
      <div class="source">
          source{ { data}}
      </div>
    </template>
    
    <script>
    import $ from 'jquery'
      export default({ 
        name:"source",
        data(){ 
          return{ 
            data:""
          }
        },
        created(){ 
          this.getData()
        },
        methods:{ 
          getData () { 
            var self = this
            $.ajax({ 
              url: '你要请求的url',
              type: 'GET',
              dataType: 'JSONP',
              success: function (res) { 
                self.data = res.result
              }
            })
          }
        }
      })
    </script>
    <style>
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]

[https_www.cnblogs.com_xishaohui_p_8664814.html]: https://www.cnblogs.com/xishaohui/p/8664814.html
[http_nginx.org_en_download.html]: http://nginx.org/en/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200713101848430.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201123155435405.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ==,size_16,color_FFFFFF,t_70#pic_center