前端杂症--跨域常用方案

前言：

如果问我踏入前端初期，最烦的是什么问题，我回答：跨域。当初前端小白，出了问题真的不知道咋办（后来才知道需要后端的配合）。本文来说说比较简单也是目前见到公司比较常用的方案。

一、啥是跨域

跨域是一种同源保护机制，说白了，保证自己家人（客户端）用自己东西（服务端 / 资源）。

二、跨域解决方案 （非全部，我就知道这些）

1. 利用src天生跨域特性

仔细看看图片、frame、script（jsonp），这些方法都用的这样的特性，该方法满足两个条件。

• src地址直接请求到资源（也就是get拉）
• 获取的资源直接被标签解析

2. 利用代理

这个比较好理解啦，浏览器不是不支持不同地址嘛，我访问我自己，本地开启一个服务进行转发。有两个方案。
缺点是浏览器看不到真正请求地址，可以使用抓包工具（wireshark啥的都行）。

webpack配置代理（proxy）

// 基本配置  ‘/’ 是拦截所有请求，以下分别说明http与https的访问
proxyTable:{
	 '/': {
        target: 'https://test.local/api', // 你接口的域名
        secure: false, // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
      }，
       '/': {
        target: 'http://test.local/api', // 你接口的域名
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: { // 替换字段
        	'/source' : '/target'
        }
      }
}

本地开nginx

这个优点是多个项目可共同享用，目前在用。因为公司后台临时指定8080端口，而我两个项目不可能用一个端口。

• 步骤一：下载nginx http://nginx.org/en/download.html 选择稳定版本
• 步骤二：修改 NginxHome/conf/nginx.conf 文件，配置如下。

// 如发送http://localhost:8080/test/api
// 转发http://192.168.1.56:80/investor/api

worker_processes  1;

events {
    worker_connections  1024;
}

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

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       8080; # nginx监听的端口
	    server_name  localhost:8080;

        location /test {  # 拦截的请求，注意最后生成的请求不包括这个
        
	      proxy_set_header Host $host:8080;
	      proxy_set_header Referer http://$host:8080/;
	      proxy_set_header Origin http://$host:8080;
	      # 以上三个是设置请求头
	    
          proxy_pass   http://192.168.1.56:80/investor/; # 转发到哪里
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

3.后台处理

** 后台大门打开，前台还处理毛线，直接进好啦。有两种处理方式哦**

• 设置header
• 使用cors模块
  虽然两种，但是原理上相当于提前告诉看门的，有访客来看我，给放行哦

三、其他

1.跨域缓存

刚遇到的问题，贴代码吧，反正跑通了

//axios文件中配置 
axios.defaults.withCredentials = true;

//服务端只知道cors处理，以node服务端为例
var express = require('express')
var cors = require('cors')
var app = express()

var corsOptions = {
    credentials: true, //配合携带cookie跨域（Access-Control-Allow-Credentials:true）   这段哦！！
    origin: 'http://localhost:8080', //只有本地
    optionsSuccessStatus: 200
}

app.get('/teststatus', cors(corsOptions), function (req, res, next) {
    //设置错误码
    res.status(500);
    //返回数据
    res.json({code:200, message: '只有本地可以访问', data:{type: 'modal'}});
})

2.谷歌浏览器取消跨域（用于开发时）

https://blog.csdn.net/lantingshuxu/article/details/80308028