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

我就不思

已于 2022-05-09 10:50:46 修改

阅读量305

点赞数 1

分类专栏： AJAX 文章标签： nginx 网络前端

于 2020-07-13 10:42:52 首次发布

本文链接：https://blog.csdn.net/weixin_45788691/article/details/106268944

版权

AJAX 专栏收录该内容

5 篇文章 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
下载nginx: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文件就可以，如图：
在这里插入图片描述
本地调用的服务都走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>