什么是跨域？

跨域是因为浏览器的同源策略导致的。

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 -MDN

注意：跨域问题只会在浏览器端产生。

何为同源策略呢：简单来说就是协议，域名，端口都一致才会被认定为同源。

示例

本地启动一个后台服务并编写一个简单接口，端口为3009

const koa = require("koa")
const Router = require("koa-router")
const cors = require("koa2-cors")

const router = new Router()

const app = new koa()

router.get("/cors", (ctx, next) => {
	ctx.status = 200
	ctx.body = "hello cors"
	next()
})

app.use(router.routes())
// app.use(cors())

app.listen(3009)

前端页面请求该接口，由于同源策略会造成跨域。

如何解决

下面说说项目中用过的方式

1. cors

CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。

同源安全策略默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。

具体来说就是设置一些aca响应头，通过这些参数制定浏览器与服务器之间进行交流的规则。

Access-Control-Allow-Origin：该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
Access-Control-Allow-Credentials：该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。
Access-Control-Expose-Headers：该字段可选。指定想拿到的字段。

当前后端项目直接使用koa-cors中间件。

const cors = require("koa2-cors")
app.use(cors())

控制台可以查看如下信息，成功获取接口信息。

2. webpack配置proxy

大多数本地项目会才用该方式来处理开发阶段产生的跨域问题

 proxy: {
     '/api/': {
        target: 'https://www.test.com', // 需要代理的域名
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置为true
        pathRewrite: {
            '^/api': '',
              },
        },

3. nginx反向代理

利用 nginx 服务将请求转发到相同域名下从而解决跨域问题
nginx 配置：

// 在location添加一项配置
location /nginx/ {
            proxy_pass  http://127.0.0.1:3009/;  # 代理的域名
        }

项目中使用/nginx/来代理 http://127.0.0.1:3009/, 我这里 nginx 监听的是 8080 端口，因此请求为

axios.get('http://127.0.0.1:8080/nginx/cors')

在这里发现了一个问题，此时控制台查看当前请求处于跨域状态

发现是因为当前接口并没有设置跨域请求头，因此需要在 nginx 配置中设置为允许跨域

location /nginx/ {
            proxy_pass  http://127.0.0.1:3009/;  # 代理的域名
            add_header Access-Control-Allow-Origin *;
        }

重启 nginx 服务可成功获取接口信息

记录-跨域

什么是跨域？

示例

如何解决

1. cors

2. webpack配置proxy

3. nginx反向代理