第一步:首先在后端web.config中设置跨域设置
<!--跨域设置-->
<httpProtocol>
<customHeaders>
<!--响应类型 (值为逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法)-->
<add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
<!--响应头设置(Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)-->
<add name="Access-Control-Allow-Headers" value="*" />
<!--如果设置 Access-Control-Allow-Origin:*,则允许所有域名的脚本访问该资源-->
<add name="Access-Control-Allow-Origin" value="http://192.168.20.223:8080" />
<add name="Access-Control-Allow-Credentials" value="true" />
<!--<add name="Access-Control-Allow-Origin" value="http://domain1.com, http://domain2.com" /> 设置允许跨域访问的网址-->
</customHeaders>
</httpProtocol>
<validation validateIntegratedModeConfiguration="false" />
在Access-Control-Allow-Origin中的Value改成前端的访问ip+端口;
第二步:打开前端代码axios.js
let instance = axios.create({
baseURL: process.env.API_HOST,
headers: {
// 'Access-Control-Allow-Credentials': true,
//'Access-Control-Allow-Origin': 'http://192.168.20.223:8080'
},
timeout: 30000, // 请求超时时间
withCredentials:true,
crossDomain:true
});
添加withCredentials:true 和 crossDomain:true 这两个属性(如果是jquery请求,同样设置这两个属性即可)
第三步:打开前端代码config文件夹在dev.env.js中
'use strict' // 开发环境配置
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_UPLOAD: '"http://47.114.115.154:8883/"', // 上传图纸(现场照片/视频)存放地址
// API_HOST: '"http://47.114.115.154:8885/"' // 其他接口地址
API_HOST: '"http://192.168.20.223:50309/"'
})
对API_HOST设置后端本地访问路径
第四步:打开前端代码config文件夹在index.js中
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static', // 指的是静态资源文件夹,默认“static”,
assetsPublicPath: '/', // 指的是发布路径
proxyTable: {
'/api/': {
target: process.env.API_HOST,
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': ''
}
}
},
// Various Dev Server settings
host: '192.168.20.223', // 能被process.env.HOST覆盖吗
port: 8080, // 可以被process.env覆盖。端口,如果端口正在使用,将确定一个空闲的端口
autoOpenBrowser: true, // 是否自动打开浏览器
errorOverlay: true,
notifyOnErrors: true,
poll: false, /
设置是否跨域changeOrigin为true
第五步:正式发布时只需要将后端web.config改成前端发布ip加端口即可