# cross-domain

**Repository Path**: hduwangbing/cross-domain

## Basic Information

- **Project Name**: cross-domain
- **Description**: 前端跨域处理多种方式
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-02-06
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## **前端跨域处理多种方式**

## 1. webpack proxy

```js
//webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devServer: {
    proxy: {
      //开发阶段前端设置代理 https://juejin.im/post/5d8448a8f265da03c61e8c1d
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '/api': '' }
      }
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'cross-domain',
      filename: 'index.html'
      // template: 'index.html'
    }),
    // HMR
    new webpack.HotModuleReplacementPlugin()
  ]
}

//index.js
fetch('/api/user')
  .then(res => res.json())
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

//server.js
const express = require('express')
const app = express()

app.get('/user', (req, res) => {
  res.json({
    name: 'jack'
  })
})

app.listen(3000, () => {
  console.log(`服务启动, 监听3000端口`)
})
```

## 2. cors

```js
//webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'cross-domain',
      filename: 'index.html'
      // template: 'index.html'
    }),
    // HMR
    new webpack.HotModuleReplacementPlugin()
  ]
}
//index.js
fetch('http://localhost:3000/user')
  .then(res => res.json())
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })
//server.js
const express = require('express')
const app = express()

//cors
const allowCrossDomain = function(req, res, next) {
  //请求源
  res.header('Access-Control-Allow-Origin', '*')
  //请求头 x-token
  res.header('Access-Control-Allow-Headers', '*')
  //请求方法
  res.header('Access-Control-Allow-Methods', '*')

  next()
}

app.use(allowCrossDomain)

app.get('/user', (req, res) => {
  res.json({
    name: 'jack'
  })
})

app.listen(3000, () => {
  console.log(`服务启动, 监听3000端口`)
})
```

## 3. webpack plugin

```js
//webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'cross-domain',
      filename: 'index.html'
      // template: 'index.html'
    }),
    // HMR
    new webpack.HotModuleReplacementPlugin()
  ]
}

// server.js
const express = require('express')
const app = express()

//中间件
let webpack = require('webpack')
let middle = require('webpack-dev-middleware')
let compiler = webpack(require('./webpack.config.js'))
app.use(middle(compiler))

app.get('/user', (req, res) => {
  res.json({
    name: 'jack'
  })
})

app.listen(3000, () => {
  console.log(`服务启动, 监听3000端口`)
})
```

## 4. nginx 反向代理

## 5. jsonp